Angular 嵌套 FormGroup 中带有 FormArray 的反应式表单

Question

我找到了很多例子，还有其他已回答的问题。包括看起来很清楚，但我仍然无法使我的案例奏效。

我有以下 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]
  })
});

我无法让它在视图中呈现，无论我尝试了什么，我都会收到错误消息。这是我找到的 latest/current 段代码，在我找到所有其他答案和 google 结果之后：

<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 是一个控件还是一个组，或者它是什么，我发现的每一种用法都显得如此独特和复杂。

Answer 1

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

Answer 2

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

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

不知道为什么第一次没有成功。

需要注意的一件事：我还发现在进行生产构建时出现错误。为了解决这个问题，我不得不在组件的 class:

中添加这个方法

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

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

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

（这真的很奇怪，如果你问我的话，应该没有必要......）

Angular 嵌套 FormGroup 中带有 FormArray 的反应式表单

Angular Reactive Forms with FormArray inside a nested FormGroup

angular

angular-reactive-forms

formarray