Angular嵌套FormGroup中FormArray无法正确渲染表单问题求助

嗨，我帮你梳理下问题出在哪，以及怎么修复：

问题1：Getter方法类型错误 #

你原来的getter把dropDownOptions当成了FormArray，但实际上它是一个FormGroup，里面的items才是FormArray。这就导致你获取控件的路径完全错了。

修正后的Getter应该是这样：

// 直接通过路径获取，或者分步获取都可以
get items(): FormArray {
  return this.form.get('dropDownOptions.items') as FormArray;
  
  // 分步写法更清晰，适合复杂结构：
  // const dropDownGroup = this.form.get('dropDownOptions') as FormGroup;
  // return dropDownGroup.get('items') as FormArray;
}

问题2：模板控件层级不匹配 #

Angular的响应式表单要求模板结构和FormGroup/FormArray的层级完全对应。你原来的模板直接在根form下找items，但items是嵌套在dropDownOptions这个子FormGroup里的，所以Angular找不到这个控件，才会抛出Cannot find control with name: 'items'的错误。

修正后的模板结构：

<form [formGroup]="form" (ngSubmit)="submit()">
  <!-- 首先要声明当前层级是dropDownOptions这个FormGroup -->
  <div formGroupName="dropDownOptions">
    <!-- 现在可以正确找到这个FormGroup下的items FormArray了 -->
    <div formArrayName="items" *ngFor="let item of items.controls; let i = index">
      <div [formGroupName]="i">
        <input formControlName='name' placeholder="Name">
        <input formControlName='surname' placeholder="Surname">
      </div>
    </div>
  </div>
</form>

额外验证小技巧 #

如果以后遇到类似控件找不到的问题，可以在ngOnInit里打印表单的结构，确认控件的层级关系：

ngOnInit() {
  this.form = this.fb.group({
    dropDownOptions: this.fb.group({
      items: this.fb.array([this.createItem()])
    })
  });
  // 打印表单值，就能清晰看到层级：{ dropDownOptions: { items: [ {name: 'Jon', surname: 'Doe'} ] } }
  console.log(this.form.value);
}

这样修改后，你的嵌套表单应该就能正常渲染啦！

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