时间戳

首页 > 解决方案 > 如何让 * ngFor 生成的每个输入都有自己的表单控件

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

问题描述

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

组件.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 个

组件.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;
}

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

标签： angularngforangular-forms

解决方案

为了保持相同的 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;
}

推荐阅读