在嵌套的 FormGroup 中使用 FormArray 的 Angular 反应式表单答案

【问题标题】：Angular Reactive Forms with FormArray inside a nested FormGroup在嵌套的 FormGroup 中使用 FormArray 的 Angular 反应式表单
【发布时间】：2018-12-13 00:09:11
【问题描述】：

我找到了很多例子，还有其他已经回答的问题。包括this one，这似乎很清楚，但我仍然无法使我的案例工作。

我有以下 Angular 反应形式（如果我与链接问题的答案进行比较，这似乎还可以）：

this.frm = this.fb.group({
  // ... a bunch of other groups
  // and then:

  custom_data: this.fb.group({
    pairs: this.fb.array([
      this.fb.group({
        custom_key: '',
        custom_value: ''
      })
    ]),
    expire_date: '',
    active: ['', Validators.required]
  })
});

我无法让它在视图中呈现，无论我尝试了什么，都会出错。这是我得到的最新/当前代码，在我能找到所有其他答案和谷歌结果之后：

<form [formGroup]="frm">

  <fieldset>
    <legend>Custom Data:</legend>

    <ng-container formGroupName="custom_data">
      <div class="row">

        <div formArrayName="pairs">
          <div *ngFor="let pair of custom_data.get('pairs').controls; let i = index">
            <div [formGroupName]="i">
              <input type="text" formControlName="custom_key" placeholder="Custom key" />
              <input type="text" formControlName="custom_value" placeholder="Custom value" />
            </div>
          </div>
        </div> <!-- / end FormArray -->

        <div class="col-xs-6">
          <div class="form-group">
            <label class="control-label">Expires</label>
            <input type="text" formControlName="expire_date" class="form-control" />
          </div>
        </div>

        <div class="col-xs-6">
          <div class="form-group">
            <label class="control-label">Active<sup>*</sup></label>
            <select formControlName="active" class="form-control">
              <option value="1">Yes</option>
              <option value="0">No</option>
            </select>
          </div>
        </div>

      </div>
    </ng-container>
  </fieldset>    
</form>

我已经尝试了以下所有方法，但没有任何运气：

<div *ngFor="let pair of custom_data.get('pairs').controls; let i = index">

<div *ngFor="let pair of pairs.controls; let i = index">

<div *ngFor="let pair of frm.controls['custom_data'].get('pairs').controls; let i = index">

我什至不确定 FormArray 是 Control 还是 Group 或者它是什么，我发现的每一种用法似乎都如此独特和复杂。

【问题讨论】：

你必须将一个元素推送到数组“pairs”中，这样你才能在视图中看到它。
你能提供你的代码的codepen / fiddle链接吗？
试试
。当您的 frm 未定义时，此“*ngIf”可避免错误（在您的应用程序的早期 - 在您提供数据之前 -）

标签： angular angular-reactive-forms formarray

【解决方案1】：

所以我最终从头开始重做。奇怪的事情......事实证明，我尝试过的第三件事最终奏效了：

<div *ngFor="let pair of frm.controls['custom_data'].get('pairs').controls; let i = index">

不知道为什么它第一次不起作用。

需要注意的一点：我还发现在进行生产构建时出现错误。为了解决这个问题，我不得不在我的组件类中添加这个方法：

myFormArray() {
  return this.frm.controls['custom_data'].get('pairs') as FormArray;
}

然后，在我的模板中，使用方法：

<div *ngFor="let pair of myFormArray().controls; let i = index">

（如果你问我，这真的很奇怪，不应该是必要的......）

【讨论】：

【解决方案2】：

必须push到数组，可以查看这个link for example

【讨论】：