0

Estou usando um input type="datetime-local" dentro de uma mat-table em Angular. Porém os inputs não estão sendo populados conforme esperado. Quando tenho apenas um registro na tabela, está fazendo corretamente, porém quando tenho mais valores, nenhum input é populado.

Segue abaixo o código:

HTML

    <table mat-table [dataSource]="dataSourceBudgetProduct">
                <ng-container matColumnDef="ApplicationDate">
                       <th mat-header-cell *matHeaderCellDef> Agendar para </th>
                              <td mat-cell *matCellDef="let element">
                                  <mat-form-field id="application-date-column" appearance="outline">
                                           <input type="datetime-local" matInput formControlName="ApplicationDate" [(ngModel)]="element.ApplicationDate">
                                  </mat-form-field>
                              </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="displayedColumnsBudgetProduct"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumnsBudgetProduct;" class="hover-element-row"></tr>
    
</table>

no TS estou populando a tabela com os dados que eu trago do backend via API:

this.dataSourceBudgetProduct = new MatTableDataSource(response);

O formato retornado para este campo é:

ApplicationDate: "2022-10-12T08:30:00"

O que posso estar fazendo errado?

9
  • Você esta modificando o valor do input no component.ts ou algo assim? esse erro esta relacionado ao ciclo de vida do componente. pode compartilhar o seu código do component.ts? para que eu possa ajudar precisarei de mais informações
    – Eustáquio
    Commented 13/10/2022 às 18:11
  • Na verdade este erro não está aparecendo mais Estáquio, era um erro de uma forma anterior em que estava fazendo onde eu estava modificando realmente o valor pelo component.ts... Neste caso não recebo nenhum erro, só quando tenho mais de um registro na tabela os inputs não são preenchidos.
    – HuntressDC
    Commented 14/10/2022 às 14:56
  • de todo modo se puder compartilhar mais informações sobre o novo problema. se entendi direito você esta com esse input em uma tabela? certo. se esse é o caso será necessário modificar o formGroup e colocar um formArray.
    – Eustáquio
    Commented 14/10/2022 às 16:47
  • 1
    Você esta trabalhando com FormGroup? pois acabei de perceber que no meu teste quando removi o formControlName="ApplicationDate" funcionou normalmente. ai cheguei a duas conclusões ou você remove o formControlName="ApplicationDate" e trabalha somente com o ngModel ou você remove o uso de ngModel e trabalha somente com o formControl, formGroup e formArray.
    – Eustáquio
    Commented 14/10/2022 às 17:16
  • 1
    De todo modo segue um blog muito bom explicando como implementar um formArray -> Angular FormArray: Complete Guide
    – Eustáquio
    Commented 14/10/2022 às 18:10

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .