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?
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çõesformControlName="ApplicationDate"
funcionou normalmente. ai cheguei a duas conclusões ou você remove oformControlName="ApplicationDate"
e trabalha somente com ongModel
ou você remove o uso dengModel
e trabalha somente com oformControl
,formGroup
eformArray
.Angular FormArray: Complete Guide