Angular使用FormArray报Cannot find control with path错误如何解决

使用formArray时报错Cannot find control with path: 'nameDriver -> 1'的核心原因是：你对普通自定义数组nameDriver做增删操作时，没有同步更新driverInfoForm中绑定的nameDriver FormArray实例的控件，Angular响应式表单找不到对应索引的FormGroup控件就会抛出该错误。

• 增删逻辑仅修改了普通数组nameDriver，未操作表单对应的FormArray实例
• 模板中同时混用formControlName和ngModel，响应式表单场景下不需要双向绑定到自定义数组，容易出现数据不同步
• 循环渲染的数据源用了自定义普通数组，而非FormArray自带的controls集合

Component 部分 #

driverInfoForm: FormGroup;
// 直接取表单里的FormArray，不需要单独维护普通数组
get nameDriver(): FormArray {
  return this.driverInfoForm.get('nameDriver') as FormArray;
}

constructor(private fb: FormBuilder) {
  // 表单初始化，默认带一个空的driver控件
  this.driverInfoForm = this.fb.group({
    nameDriver: this.fb.array([this.createDriver()])
  })
}

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

// Add New Driver Handler
addDriver() {
  // 直接往FormArray里加控件，不要操作普通数组
  this.nameDriver.push(this.createDriver());
}

// Remove Driver Handler
removeDriver(i: number) {
  if (i != 0) {
    // 调用FormArray的removeAt方法删除对应索引控件
    this.nameDriver.removeAt(i);
  }
}

HTML 部分 #

去掉ngModel绑定，循环遍历FormArray的controls：

<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.controls; let i=index">
      <label>{{i+1}}.Name</label>
      <input class="form-control" type="text" id="name" name="name{{i}}"  formControlName="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>

内容的提问来源于stack exchange，提问作者Fash