Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

  • É obrigatório que a propriedade t-selectable esteja como true.
<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 e validate 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 coluna genreDescription 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 campo genre.
  • 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.