Question

我找到了很多例子，还回答了其他问题。包括this one似乎很清楚，但我仍然无法解决我的问题。

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

<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">

if(value){ $( "#container" ).append( "<input type='text' required>" ); else $( "#container" ).append( "<input type='text'>" );

我什至不确定FormArray是控件还是Group或它是什么，我发现的每种用法看起来是如此独特和复杂。

Answer 1

您必须推送到阵列，可以检查此link for example

Answer 2

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

<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">

（这真的很奇怪，如果您问我，那不是必须的...）

嵌套FormGroup中具有FormArray的Angular反应形式

2 个答案: