无法获取 FormBuilder 数组的 formControlName

Question

我在获取 formControlName 的 FormBuilder 数组时出错：

错误：找不到带有路径的控件：'elements -> 0 -> name'

<form [formGroup]="targetAttributesForm" (ngSubmit)="save(myForm)">
  <input formControlName="nono" placeholder="First">

  <div formArrayName="elements">
    <div *ngFor="let address of targetAttributesForm.controls.elements.controls; let w=index" class="panel panel-default">
      <div [formGroupName]="w">
        <span>Att {{w + 1}}</span>
        --> {{ address[w] }}
        <label>Attribut name</label><input type="text" formControlName="name">
        <label>Attribut type</label>
      </div>
    </div>
  </div>
</form>

我的 app.component.ts：

ngOnInit() {
    this.targetAttributesForm = this._fb.group({
       nono : ['a', Validators.required],
       elements : this._fb.array([this.initAttribut]) 
      });
}
initAttribut() {
  return this._fb.group({
        name : ['a', [Validators.required]],
        type : ['b', Validators.required]
    });
}

这是我的错误：

错误：找不到带有路径的控件：'元素 -> 0 -> 名称' 追踪 de la pile : _throwError@http://localhost:4200/vendor.bundle.js:69949:11 设置控制@http://localhost:4200/vendor.bundle.js:69857:9 ../../..

Answer 1

我认为您输入错误是因为忘记调用您的 initAttribut 函数：

this._fb.array([this.initAttribut()])
                               ^^^^^^
                        you need to call this function

否则FormBuilder 将创建一个包含一个FormControl 的数组，而不是一个包含一个FormGroup 的数组。

StackBlitz Example