Histórico da Página
- É obrigatório que a propriedade
t-selectable
esteja comotrue
.
<thf<thf-grid
t-service-api="
https://po-sample-api.onrender.com/v1/people"
[t-columns]="columns"
[t-edit-properties]="editProperties"
>
</thf-
grid>grid>
form: FormGroup;
editProperties: ThfGridEditProperties;
ngOnInit() {
this.editProperties = {
actionEdit: this.setFormGroup.bind(this),
validate: this.changeValueForm.bind(this) // PROPRIEDADE OPCIONAL
};
}
setFormGroup(dataItem) {
const genreDescription = this.columns1.find(column => column.property === 'genreDescription');
genreDescription.editProperties.disabled = true;
genreDescription.editProperties.options = this.appService.getCity(dataItem.genre);
this.form = new FormGroup({
id: new FormControl(dataItem.id, [Validators.required]) // ID É OBRIGATÓRIO,
city: new FormControl(dataItem.city),
email: new FormControl(dataItem.email),
birthdate: new FormControl(dataItem.birthdate),
genre: new FormControl(dataItem.genre),
status: new FormControl(dataItem.status),
genreDescription: new FormControl(dataItem.genreDescription, [Validators.required])
});
return this.form;
};
- É obrigatório que seja passado o formControl
id
para que a requisição PUT envie-o como parâmetro. - É obrigatório que as propriedades
actionEdit
evalidate
sejam do tipo Function e que retorne o formGroup com as propriedades das colunas que serão editáveis. - A propriedade
actionEdit
é obrigatória para acionar essa funcionalidade. Ela é executada toda vez que inicia o modo edição de alguma linha. Nesse exemplo, além de eu retornar o formulário que é obrigatório, também aproveitei o método para encontrar minha colunagenreDescription
e desabilitar o meu select toda vez que o modo edição ser iniciado, além de setar as opções desse campo de forma customizada, sendo relacionada com o campogenre
. - A propriedade
validate
é opcional para caso haja necessidade de customizar algum campo ou valor após algum valor ser alterado. Mais abaixo comento sobre essa funcionalidade. - A propriedade actionEdit passa um parâmetro para o método executado. É um objeto com os valores iniciais de cada campo de acordo com o payload da API.
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas