我的 Angular 5/Angular Material 应用程序中有这个 FormArray:
this.form = new FormGroup({
customerNumberContainers: new FormArray([
new FormGroup({
contactTenant: new FormControl('', [Validators.required, Validators.minLength(2)]),
customerNumber: new FormControl('', [Validators.required, Validators.minLength(2)])
}),
]),
...
其实我不知道如何跑遍这个FormArray。 我试过这个
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div formGroupName="customerNumberContainers">
<div *ngFor="let customerNumberContainer of form.controls['customerNumberContainers']; index as i">
<mat-input-container class="full-width-input" style="min-width:100px;">
<input matInput placeholder="Tenant" formControlName="customerNumberContainer[i].contactTenant">
</mat-input-container>
<mat-input-container class="full-width-input" style="min-width:100px;">
<input matInput placeholder="Customernumber" formControlName="customerNumberContainer[i].customerNumber">
</mat-input-container>
</div>
</div>
...
最佳答案
实际上你应该怎么做:
有一个返回你的控件数组的方法
get customerNumberContainers(): FormArray {
return this.form.get("customerNumberContainers") as FormArray;
}
您将使用变量i 来管理数组中的表单组
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div formArrayName="customerNumberContainers">
<div *ngFor="let customerNumberContainer of customerNumberContainers.controls; index as i" [formGroupName]="i">
<mat-input-container class="full-width-input" style="min-width:100px;">
<input matInput placeholder="Tenant" formControlName="contactTenant">
</mat-input-container>
<mat-input-container class="full-width-input" style="min-width:100px;">
<input matInput placeholder="Customernumber" formControlName="customerNumber">
</mat-input-container>
</div>
</div>
...
您可以创建添加方法和删除方法来管理数组中的表单组
add(data?: any) {
/// data is to set up values to your internal form (useful for edition)
this.customerNumberContainers.push(this.fb.group({
}))
}
remove(index: number) {
this.customerNumberContainers.removeAt(index)
}
希望对你有帮助
问候
关于 Angular 5 FormArray,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49069837/