Angular 5 FormArray答案

【问题标题】：Angular 5 FormArrayAngular 5 FormArray
【发布时间】：2018-08-10 17:02:57
【问题描述】：

我的 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>
   ...

【问题讨论】：

您是否考虑过创建一个自定义组件来实现 ControlValueAccessor 来处理数组修改？

标签： angular angular-material formarray

【解决方案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(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)
    }

希望对你有帮助

问候

【讨论】：

【解决方案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>...

希望这会有所帮助:)

【讨论】：

模板中可以直接使用form.get('customerNumberContainers').controls。 getControls() 函数没用

【解决方案3】：

看看工作演示

StackBlitz: Demo

解释：

在 Angular 中使用 Form Array 需要做很多事情。请参阅 Aligator.io 博文。
不带方括号使用时：formControlName="value"，值表示为字符串。
如果使用方括号：[formControlName]="customerNumberContainer[i].contactTenant"，则接受变量。

【讨论】：

【解决方案4】：

你要在表单数组中有多个formGroups吗？

this.form = new FormGroup({    
  customerNumberContainers: new FormArray([
    new FormControl('', [Validators.required, Validators.minLength(2)]),
    new FormControl('', [Validators.required, Validators.minLength(2)])
  ])
});

如果不是，这就是它的样子。并且记住在更改表单数组的值时使用常量

const arr = <FormArray>this.form;

然后你就可以push，等等……

arr.push(new FormControl(''));

如果您不这样做，某些表单数组函数将无法工作。

【讨论】：