Angular FormArray：在模板中引用动态添加的 FormControl答案

【问题标题】：Angular FormArray: referencing dynamically added FormControl in templateAngular FormArray：在模板中引用动态添加的 FormControl
【发布时间】：2018-05-20 09:24:35
【问题描述】：

我正在处理 Angular Reactive 表单，我已经动态地将几个 FormControl 添加到 FormArray 中，但是在将它们与 formControlName 绑定时，我遇到了在我的模板中引用这些 FormControl 的问题。在模板中，我将循环索引变量“i”分配给 formControlName，但它不起作用。通过将控件与 formControlName 绑定，我得到“带路径的表单控件的无值访问器”。这是我的组件类代码：

export class Control {
  constructor(public controlType?: string, public label?: string, public required?: boolean, public placeholder?: string,
    public options?: string[], public value?: string) { }
}

export class FormComponent implements OnInit {
  reviewForm: FormGroup;

  constructor(public formService: FormService, public dialog: MdDialog) { }


  selectedControl: any = null;
  label: string;

  ngOnInit() {
    this.reviewForm = new FormGroup({
      'controlArray': new FormArray([
      ])
    });
  }

  addControl() {
    const myControl: Control = new Control(this.selectedControl.name, this.label, this.isRequired,
      this.selectedControl.attributes.value, this.selectedControl.attributes.options, 'null');
    var control: FormControl = new FormControl(myControl);
    (<FormArray>this.reviewForm.get('controlArray')).push(control);
  }

}

这是我组件的模板：

<form [formGroup]="reviewForm" (ngSubmit)="onSubmit()">
  <div class="example-label">
    <span class='block'>    
              <span *ngIf="selectedForm">
                      <h2 class="example-heading">{{displayForm}} </h2>
              </span>
    <div formArrayName="controlArray">
      <div *ngFor="let control of reviewForm.get('controlArray').controls; let i = index">
        <table>
          <tr>
            <span *ngIf="control.value">
                    <td> 
                      <label>{{control.value.label}}</label>                           
            </td>
            <td><span *ngIf="control.value.controlType == 'select'">                
                      <md-select placeholder="{{control.value.label}}" [formControlName]="i" >
                        <md-option *ngFor="let option of control.value.options; let i=index" 
                        [value]="option">{{control.value.options[i]}}</md-option>                  
                      </md-select>
                    </span></td>
            <td> <span *ngIf="control.value.controlType == 'text'">
              <md-form-field class="example-full-width">
                <input mdInput type="text" placeholder="{{control.value.placeholder}}" [formControlName]="i" >
              </md-form-field>  
          </span></td>
            <td> <span *ngIf="control.value.controlType == 'radio'">
              <md-radio-group>
                      <span *ngFor="let option of control.value.options">
                        <md-radio-button name="gender" value="{{option}}" [formControlName]="i" >{{option}} </md-radio-button>
                      </span>
              </md-radio-group>
              </span>
            </td>
            <td> <span *ngIf="control.value.controlType == 'checkbox'">
                      <md-checkbox value="{{control.value.controlType}}" [formControlName]="i" > </md-checkbox>
                    </span></td>

            <td> <span *ngIf="control.value.controlType == 'textarea'">
                      <textarea name="Comment" id="" cols="30" rows="10" [formControlName]="i" ></textarea>  
                    </span></td>

            <td> <span *ngIf="control.value.controlType == 'button'">
                        <button md-raised-button value="{{control.value}}" [formControlName]="i" >Button</button>  
                    </span> </td>
            </span>
          </tr>
        </table>
      </div>
    </div>
    </span>
  </div>
</form>

在我的组件类中，FormGroup 中只有 FormArray。在 addControl 函数中，我制作了一个自定义控件并将该控件作为第一个参数传递给 FormControl。之后，我将此 FormControl 推送到我的 FormArray 中。请帮助，在模板中如何将 formControlName 关联到 FormControls。谢谢

【问题讨论】：

*ngIf="control.value[formControlName]=" i ""这是什么语法？
对不起，这是一个拼写错误。我已经解决了这个问题。 @ChauTran
似乎control 是一个对象，因此您需要使用formGroup 而不是formcontrol。
你能告诉我怎么做吗？ @AJT_82
好的，谢谢您的帮助。

标签： angular angular-reactive-forms angular-forms form-control formarray

【解决方案1】：

你可以这样绑定：

reviewForm.controls.controlArray.controls[i].controls.DATAYOULIKEBIND.value

【讨论】：

【解决方案2】：

我遇到了同样的问题，用组件类中的getter解决了。

get controlArray(): FormArray {
    return <FormArray> this.reviewForm.get('controlArray');
}

注意转换为 FormArray，否则 getter 返回 AbstractControl 并且您无法访问任何数组属性或函数。

然后在模板中你可以做这样的事情。

<div formArrayName="controlArray">
    <div *ngFor="let control of controlArray.controls; let i = index" >

【讨论】：

与此类似。请参阅angular.io/api/forms/FormArrayName#example 处的示例
...然后使用 i 变量作为控件元素的 [formControlName]。
请记住，我在 2018 年 12 月回答了这个问题，当时 Angular 7 是最新版本。文档将是最新版本的最新版本。

【解决方案3】：

你应该这样做。将 [formGroupName]=i 添加到您添加了 formArray 的下一个 div。这样Angular就知道正确的遍历。希望这可以帮助。我之前遇到过同样的问题，这个修复帮助了我

<div formArrayName="controlArray"> <div [formGroupName]=i *ngFor="let control of reviewForm.get('controlArray').controls; let i = index">

【讨论】：