将表单字段动态添加到 Angular 8 中的反应性 forms

Question

我在从数组中填充表单字段时遇到了一些麻烦。 我最初的想法是将数组从单个组件输入到将处理表单的单个组件。 而不是制作多个 forms。 但我似乎无法让它工作。 任何帮助，将不胜感激。 我浏览过 Google/stack/medium，似乎找不到任何东西。 我在 plunkr 上做了一个例子。

https://stackblitz.com/edit/angular-t7hcq6

在 ts 文件中：

  public demoForm: FormGroup;
  public arrayItems: data = [];

  private formFields = ["Sku", "Title"];

  constructor(private _formBuilder: FormBuilder) {
    this.demoForm = this._formBuilder.group({
      demoArray: this._formBuilder.array([])
    });
  }

  ngOnInit() {
    this.formFields.map(field => {
      this.arrayItems.push({ title: field });
      this.demoArray.push(this._formBuilder.control(''));
    });
  }

  get demoArray() {
    return this.demoForm.get("demoArray") as FormArray;
  }

在模板中：

<form [formGroup]="demoForm">
   <div formArrayName="demoArray" 
      *ngFor="let arrayItem of arrayItems; let i=index">
      <input type="checkbox"[formControl]="demoArray[i]">
      <label>{{arrayItem.title}}</label>
   </div>
</form>

感谢你们。

Answer 1

像这样更改您的模板：

<form [formGroup]="demoForm">
   <div formArrayName="demoArray" 
      *ngFor="let arrayItem of arrayItems; let i=index">
      <input type="checkbox" [formControlName]="i"> <!-- this line -->
      <label>{{arrayItem.title}}</label>
   </div>
</form>