Remarque: J'ai réussi à utiliser FormArray dans un tableau HTML classique, comme indiqué ci-dessous . Je souhaite avoir un FormArray dans un tableau Matériau angulaire et le renseigner avec des données . J'ai essayé la même approche qu'avec HTML classique. Table, mais je n'ai pas pu la compiler à cause d'une erreur "Impossible de trouver la colonne avec l'ID 'nom' '"
<div class="form-group">
<form [formGroup]="myForm" role="form">
<div formArrayName="formArrList">
<table>
<tr>
<th>Name</th>
<th>School</th>
</tr>
<tr *ngFor="let list of myForm.get('formArrList').controls;let i = index" [formGroupName]="i">
<td>
<div class="col-sm-6">
<input class="form-control" type="text" formControlName="name"/>
</div>
</td>
<td>
<div class="col-sm-6">
<input class="form-control" type="text" formControlName="school"/>
</div>
</td>
</tr>
</table>
</div>
</form>
J'essaie d'avoir un FormArray dans ma table de matériau angulaire Voici mon fichier HTML
<div>
<form [formGroup]="myForm" role="form">
<ng-container formArrayName="formArrList">
<mat-table #table [dataSource]="myDataSource">
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
<ng-container *ngFor="let detailsItems of myForm.get('formArrList').controls;let i = index" [formGroupName]="i">
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-form-field class="" hideRequiredMarker>
<input matInput formControlName="name" type="text" class="form-control"
autocomplete="off"
placeholder="name">
</mat-form-field>
</mat-cell>
</ng-container>
<ng-container matColumnDef="school">
<mat-header-cell *matHeaderCellDef>School</mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-form-field class="" hideRequiredMarker>
<input matInput formControlName="school" type="text" class="form-control"
autocomplete="off"
placeholder="school">
</mat-form-field>
</mat-cell>
</ng-container>
</ng-container>
</mat-table>
</ng-container>
</form>
Et voici une partie de mon fichier .TS
@Component(..)
export class DemO implements OnInit {
displayedColumns = ['name', 'school'];
myForm: FormGroup;
formArrList: FormArray;
myDataSource: DataSource;
dummyData: Element[] = [];
ngOnInit(): void {
//init form arrayTree
this.myForm = this.formBuilder.group({
'formArrList': new FormArray([])
});
}
initTreeFormArray(name: string, school: string) {
return this.formBuilder.group({
'name': [code_any,],
'school': [prio,]
});
}
renderTableOnButtonClick(){
const control = <FormArray>this.treeForm.controls['formArrList'];
control.Push(this.initTreeFormArray("DummyName", "DummySchool", element.name));
this.dummyData.Push({name: "DummyName", school: "DummySchool"});
this.myDataSource = new sDataSource(this.dummyData);
}
initTreeFormArray()
ne tire pas sur init comme vous en avez besoin. Ainsi, lorsque le composant est créé, la partie HTML recherche un nom, alors qu’il n’existe pas.
Mon .02 consiste à charger un formulaire de travail et des groupes de sous-formulaires sur init et à définir la seconde fonction ultérieurement. En outre, utilisez Mat over html table.
Vous n'avez probablement pas besoin de contrôles ici
myForm.get ('formArrList'). contrôles
essayez d'utiliser
myForm.controls.formArrList.controls
or
myForm.get('formArrList')