角5 FormArray

Question

我在我的角5/角材料的应用中有这个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>
   ...

Answer 1

实际上，你应该怎么做是这样的：

有一个返回控件数组的方法。

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方法和delete方法来管理数组中的表单组。

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)
    }

我希望这对你有帮助

问候

Answer 2

改变你的

<div *ngFor="let customerNumberContainer of form.controls['customerNumberContainers']; index as i">

至：

<div *ngFor="let item of getControls(); let i = index">

并在您的.ts文件中添加：

getControls() {    
 const fa = this.form.get('customerNumberContainers') as FormArray;  return 
 fa.controls; 
}

最终结果应是：

<form [formGroup]="form" (ngSubmit)="onSubmit()">
    <div formArrayName="customerNumberContainers">          
        <div *ngFor="let item of getControls(); let i = index">
           <div [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>...

希望这会有所帮助:)

Answer 3

看一下工作演示

StackBlitz:演示

解释：

1. 有相当多的事情需要在角度上与Form一起工作。请参阅Aligator.io博客文章。
2. 如果没有方括号：formControlName="value"，则值表示为字符串。
3. 当使用方括号：[formControlName]="customerNumberContainer[i].contactTenant"时，则接受变量。