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

Question

我正在处理 Angular 响应式表单，我已将几个 FormControl 动态添加到 FormArray 中，但是在将它们与 formControlName 绑定时在我的模板中引用这些 FormControl 时遇到问题。在模板中，我将循环索引变量 "i" 分配给 formControlName 但它不起作用。我通过将控件与 formControlName 绑定来获得 "No value accessor for form control with path"。这是我的组件 class 代码：

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>

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

Answer 1

您可以这样绑定：

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

Answer 2

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

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

Answer 3

我遇到了同样的问题，并在组件 class 中使用 getter 解决了它。

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

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

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

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

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

Angular FormArray: referencing dynamically added FormControl in template

form-control

angular

angular-reactive-forms

angular-forms

formarray