时间戳

首页 > 解决方案 > 在角度中使用 FormArray

angular - 在角度中使用 FormArray

问题描述

我尝试使用formArray，但出现此错误Cannot find control with path: 'nameDriver -> 1' ，我不确定我的错在哪里。这个stackblitz演示代码

HTML

<form [formGroup]="driverInfoForm">
<div class="row" formArrayName="nameDriver">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 d-flex" [formGroupName]="i"
  *ngFor="let driver of nameDriver; let i=index">
  <label>{{i+1}}.Name</label>
  <input class="form-control" type="text" id="name" name="name{{i}}"  formControlName="name" [(ngModel)]="nameDriver[i].name"><br/>
  <label>{{i+1}}.Owner Id</label>
  <input class="form-control" type="text" id="ownerId" name="ownerId{{i}}" inputmode="numeric" dashFormat formControlName="ownerId" maxLength="14">
  <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2" >
  <div class="form-group mb-0" *ngIf="i !== 0">
    
    <button class="btn btn-danger" (click)="removeDriver(i)">
      Delete
    </button>
  </div>
  <div class="form-group mb-2">
  
    <button *ngIf="i >= 0 && i < 1" type="button" [hidden]="nameDriver.length > 3" (click)="addDriver()" class="btn btn-primary">
      Add
    </button>
  </div>
</div>
</div>
</div>
</form>

零件

createDriver () {
    return new FormGroup({
      name: new FormControl(null, Validators.required),
      ownerId: new FormControl(null, Validators.required)
    })
  }

  // Add New Driver Handler
  addDriver() {
    this.nameDriver.push({
      name: '',
      ownerId: '',
    });
  }

  // Remove Driver Handler
  removeDriver(i: number) {

    if (i != 0) {
      this.nameDriver.splice(i, 1);
    } else {
      

    }

  }

标签： angulartypescriptformarray

解决方案

您至少必须以某种方式将新的 FormGroup 推入 FormArray。

// Add New Driver Handler
addDriver() {
  // push new driver control    
  (this.driverInfoForm.get('nameDriver') as FormArray).push( this.createDriver() );
  this.nameDriver.push({
    name: '',
    ownerId: '',
   });
}

推荐阅读