Angular 5角阵

在我的角度5/角度材料应用程序中有以下格式：

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)])
        }),
    ]),
...

事实上，我不知道如何处理这个表格。 我试过这个

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

我希望这对你有帮助

问候语

更改您的

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

最终结果应该是：

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

...

希望这有帮助：）

看一看正在运行的演示

说明：

在Angular中使用Form Array需要做很多事情。请参阅博客文章

如果不使用方括号：

formControlName=“value”

，则值表示为字符串

使用方括号时：

[formControlName]=“CustomerNumber容器[i].contactTenant”

，则接受变量

---

表单数组中是否有多个表单组

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;

---

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

您是否想过创建一个实现ControlValueAccessor的自定义组件来处理数组修改？您可以直接在模板中使用form.get（'CustomerNumber Containers'）。控件。

getControls（）

函数没有用处

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

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;

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