如何让 * ngFor 生成的每个输入都有自己的表单控件答案

【问题标题】：How to get each input generated by * ngFor to have its own form control如何让 * ngFor 生成的每个输入都有自己的表单控件
【发布时间】：2020-09-18 16:48:38
【问题描述】：

我有一个表单，它有一些用 * ngFor 重复的输入，但它们用相同的“formControlName”重复所以当一个人有错误的时候，每个人都有一个错误，我想知道是否有可能让他们获得自己的formControl

component.html

<div fxFlexFill fxLayoutAlign="center center" *ngIf="sel.includes('Cobertor')">
                <mat-card fxFlex="99%" class="mat-elevation-z3">
                  <mat-card-header>
                    <mat-card-title>Cobertores</mat-card-title>
                    <mat-card-subtitle>a {{element.name.split(" ")[0]}}</mat-card-subtitle>
                  </mat-card-header>
                  <mat-card-content>
                    <div fxLayoutAlign="center center" fxLayout="row" fxLayoutGap="0.5%"
                      *ngFor="let elm of cobertorCount">
                      <mat-form-field fxFlex="80%" appearance="fill">
                        <mat-label>Añadir cobertor</mat-label>
                        <input formControlName="cobertor" type="number" matInput
                          placeholder="Ingresa la cantidad a añadir" #input [required]="sel.includes('Cobertor')">
                      </mat-form-field>
                      <mat-form-field appearance="fill" fxFlex="20%">
                        <mat-label>Tamaño</mat-label>
                        <mat-select>
                          <mat-option *ngFor="let size of sizes" [value]="size.value">
                            {{size.viewValue}}
                          </mat-option>
                        </mat-select>
                      </mat-form-field>
                    </div>
                  </mat-card-content>
                  <!--Boton para añadir nuevo cobertor-->
                  <mat-card-actions>
                    <button mat-flat-button color="primary" (click)="add('cobertor')">
                      <mat-icon>add</mat-icon>
                    </button>
                    <button mat-flat-button color="warn" (click)="remove('cobertor')">
                      <mat-icon>remove</mat-icon>
                    </button>
                  </mat-card-actions>
                </mat-card>
              </div>

这里的输入显示在材料卡中，仅在激活选择时可见，默认情况下总是有一个输入，但你可以再添加 2 个

component.ts

dataForm = new FormGroup({
    cobertor: new FormControl(null, Validators.required)
  })

sizes: any[] = [
    { value: 'matrimonial', viewValue: 'Matrimonial' },
    { value: 'individual', viewValue: 'Individual' },
    { value: 'kingsize', viewValue: 'KingSize' }
  ];

cobertorCount: any = [1];

sel = []

add(to: string) {
    switch (to) {
      case "cobertor":
        if (this.cobertorCount.length >= 3) {
          alert("Maximo")
          break;
        }
        this.cobertorCount.push(this.cobertorCount.length + 1);
        break;
}

我认为这是所有最重要的代码

【问题讨论】：

尝试使用表单控件名称中带有索引的表单数组参考此google.com/amp/s/www.digitalocean.com/community/tutorials/…

标签： angular ngfor angular-forms

【解决方案1】：

为了保持相同的 formcontrolname，我们必须在 formarray 中实现它。

<form [formGroup]="dataForm">
  <div formArrayName="dataArray" *ngFor="let item of dataForm.get('dataArray').controls; let i = index;">
    <div [formGroupName]="i">
     <input formControlName="cobertor" type="number" matInput placeholder="Ingresa la cantidad a añadir" #input [required]="sel.includes('Cobertor')">
    </div>
  </div>
</form>

ngOnInit(){
  dataForm = this.formbuilder.group({
    dataArray: this.fb.array([])
  })
}

setFormValues(){
  dataForm = this.formbuilder.group({
    dataArray: initFormArray(arrayValues)
  })
}

initFormArray(units): FormArray{
  const fArray = <FormArray>this.exampleForm.controls['dataArray'];
  units.forEach(unit=>{
    fArray.push(this.formBuilder.push({
      cobertor: [unit.value]
    }))
  })
  return fArray;
}

【讨论】：