I've been attempting to construct a material table using FormArray, but I've encountered an issue with the formContolName not being set. Here is the code snippet I've put together:
TS
form = this.fb.group({
production: this.fb.array([this.initProductionForm()])
});
initProductionForm(): FormControl {
return this.fb.control({
proddate: [''], shift: [''], machine: [''], run: [''], operator: [''], helper: ['']
});
}
createTable() {
this.dataSource = new MatTableDataSource<any>((this.complaintForm.get('production') as FormArray).controls);
this.dataSource.paginator = this.paginator;
}
ngOnInit() {
this.createTable();
}
HTML
<form [formGroup]="form">
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay; index as i">
<th mat-header-cell *matHeaderCellDef>
{{
column == 'proddate' ? 'Date' : column == 'machine' ? 'Mach#' :
column == 'run' ? 'Run#' : column
}}
</th>
<td mat-cell *matCellDef="let element" [formGroup]="element">
<input type="date" class="form-control tdfields" *ngIf="column=='proddate'" formControlName="proddate">
<input class="form-control tdfields" *ngIf="column=='shift'" formControlName="shift">
<input class="form-control tdfields" *ngIf="column=='machine'" formControlName="machine">
<input class="form-control tdfields" *ngIf="column=='run'" formControlName="run">
<input class="form-control tdfields" *ngIf="column=='operator'" formControlName="operator">
<input class="form-control tdfields" *ngIf="column=='helper'" formControlName="helper">
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay; sticky: true"></tr>
<tr mat-row *matRowDef="let element; columns: columnsToDisplay;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 1, 10, 20, 50, 100]" showFirstLastButtons></mat-paginator>
</div>
</form>
I found this example on Stackblitz and attempted to implement it, but I'm encountering the following error:
https://i.sstatic.net/s6KMN.png
Could someone provide guidance on resolving this issue? I've attempted using formGroupName instead of formGroup without success. Your help would be greatly appreciated.