Angular表单添加动态控件失败：Cannot find control with name: '0'

错误原因 #

1. 缺少FormArray容器绑定：根表单是FormGroup，其中dependentsControls是FormArray类型，但模板未通过formArrayName指定该数组的容器节点，直接使用[formGroupName]="i"会导致Angular无法定位到FormArray内的子控件。
2. 错误提示的控件引用错误：模板中formControls['dependentNameControl']指向根表单的控件，而实际控件存在于FormArray的子FormGroup中，无法正确获取验证状态。

修改后的模板代码 #

<form [formGroup]="form"  class="top15x2" autocomplete="off">
  <div class="w-100  text-start">
    <button type='button' mat-button (click)="onAddDependent()" class="button-submit" style="width:150px">+ Add Dependent</button>
  </div>

  <!-- 绑定FormArray容器，告知Angular当前区域属于dependentsControls数组 -->
  <div formArrayName="dependentsControls">
    <div
      *ngFor="let dependentsGroup of dependentsControls().controls; let i=index"
      [formGroupName]="i">
      
      <div class="d-flex flex-row w-100 justify-content-start gap20">
        <div class="col-2">
          <mat-form-field class="w-100">
            <mat-label>Name </mat-label>
            <input matInput formControlName="dependentNameControl" />
            <mat-error *ngIf="dependentsGroup.get('dependentNameControl')?.invalid">
              {{dependentsGroup.get('dependentNameControl')?.hasError('minlength') ? "Min 2 chars":""}}
              {{dependentsGroup.get('dependentNameControl')?.hasError('maxlength') ? "Max 50 chars":""}}
            </mat-error>
          </mat-form-field>
        </div>
      </div>
    </div>
  </div>
</form>

组件代码无需修改 #

import { Component } from '@angular/core';
import {
  FormArray,
  FormBuilder,
  FormControl,
  FormGroup,
  Validators,
} from '@angular/forms';

/** @title Basic datepicker */
@Component({
  selector: 'example',
  templateUrl: 'example.html',
})
export class Example {
  public form!: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit(): void {
    this.form = this.formBuilder.group({
      dependentsControls: new FormArray([]),
    });
  }

  get formControls() {
    return this.form.controls;
  }

  dependentsControls(): FormArray {
    return <FormArray>this.form.controls['dependentsControls'];
  }

  public createDependent() {
    return this.formBuilder.group({
      dependentNameControl: new FormControl<string | undefined>('', [
        Validators.minLength(2),
        Validators.maxLength(50),
      ]),
    });
  }

  public onAddDependent(): void {
    this.dependentsControls().push(this.createDependent());
    console.log(this.dependentsControls().controls);
  }
}

修改说明 #

• 添加formArrayName="dependentsControls"的容器div，让Angular明确当前节点对应根表单中的FormArray，此时[formGroupName]="i"才能正确关联到数组中索引为i的子FormGroup。
• 将错误提示中的控件引用改为当前循环的dependentsGroup.get('dependentNameControl')，确保每个输入框的错误提示对应自身的验证状态，避免跨子项的控件混淆。

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