javascript - Angular 2 : Can't add form group to form array in reactive Forms

我正在构建动态表单，并希望“动态”添加表单组。
这是我的代码，几乎可以正常工作:

import {Component, OnInit} from '@angular/core';
import {FormGroup, FormBuilder, FormArray, Validators, FormControl} from "@angular/forms";

export class CombinedComponent implements OnInit {

    ltsForm: FormGroup;

    constructor(private formBuilder: FormBuilder) {
    }

    ngOnInit() {
        this.ltsForm = this.initFormGroup();

        // init products
        for (let i = 0; i < 3; i++) { // add dynamically products
            this.addProduct();
        }

        console.log(this.ltsForm); // Array 'prods' is empty
    }

    // initialize form group, but don't add products yet because they will be added dynamically later
    initFormGroup() {
        let group = this.formBuilder.group({
            products: this.initProductGroup()
        });

        return group;
    }

    initProductGroup() {
        let group = this.formBuilder.group(
            {
                //initialize empty formbuilder array
                prods: this.formBuilder.array([])
            }
        );

        return group;
    }

    initProducts() {
        return this.formBuilder.group({
            id: [''],
            value: false, // checkbox value
        });
    }

    addProduct() {
        <FormArray>this.ltsForm.controls['products'].value.prods.push(this.initProducts());

        console.log(this.ltsForm); // Array 'prods' contains 3 FormGroup elements
    }
}

模板:

<form [formGroup]="ltsForm"
      novalidate
      (ngSubmit)="save(ltsForm)">

    <div formGroupName="products">
        <div formArrayName="prods">

            <div *ngFor="let product of ltsForm.controls.products.value.prods.controls; let i = index">
                <div [formGroupName]="i">
                    <input type="checkbox"
                           formControlName="value"
                           id="product_{{ i }}"
                           name="product_{{ i }}">
                </div>
            </div>

        </div>
    </div>

    <button type="submit"
            [disabled]="!ltsForm.valid">
        Submit
    </button>
</form>

在方法addProduct()中，我将整个FormGroup元素推送到“prods”数组。因此，最后ngOnInit()中控制台的输出仅包含一个空的“prods”数组，而addProduct()方法中控制台输出的数组具有3个元素。看来this.ltsForm失去了它的引用，并且没有更新。有任何想法吗？
UPD:刚发现，如果我从模板中删除全部内容，则会得到充满数据的“产品”。

最佳答案

存在许多小错误和复杂性，因此我缩减了您的示例并进行了备份。 Angular团队有一个非常有用的nested form array和nested form group的示例。这是过程(和plnkr):

有一个简单组工作:{ projects: '' }。

获得了一个组，该组具有一系列控件工作:{ projects: ['a', 'b', 'c'] }。我跳过了prods，这似乎是不必要的。

<form [formGroup]="ltsForm" novalidate (ngSubmit)="save()">
  <div formArrayName="products">
    <div *ngFor="let p of products.controls; let i=index">
      <input [formControlName]="i">
    </div>
  </div>
  <button type="submit" [disabled]="!ltsForm.valid">
    Submit
  </button>
</form>

...

export class CombinedComponent implements OnInit {

  ltsForm: FormGroup;

  get products() { return this.ltsForm.get('products'); }

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
      this.ltsForm = this.formBuilder.group({
        products: this.formBuilder.array([])
      });

      for (let i = 0; i < 3; ++i) {
        this.addProduct();
      }
  }

  addProduct() {
    this.products.push(this.formBuilder.control(''));
  }

  save() {
    console.log(this.ltsForm.value);
  }
}

最后一步用组替换数组中的控件:

@Component({
  selector: 'combined-component',
  template: `
    <form [formGroup]="ltsForm" novalidate (ngSubmit)="save()">
      <div formArrayName="products">
        <div *ngFor="let p of products.controls; let i=index">
          <div [formGroupName]="i">
            <input formControlName="id">
            <input type="checkbox" formControlName="value">
          </div>
        </div>
      </div>
      <button type="submit" [disabled]="!ltsForm.valid">
          Submit
      </button>
    </form>
  `
})
export class CombinedComponent implements OnInit {

  ltsForm: FormGroup;

  get products() { return this.ltsForm.get('products'); }

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
      this.ltsForm = this.formBuilder.group({
        products: this.formBuilder.array([])
      });

      for (let i = 0; i < 3; ++i) {
        this.addProduct();
      }
  }

  addProduct() {
    this.products.push(this.formBuilder.group({
      id: '',
      value: false
    }));
  }

  save() {
    console.log(this.ltsForm.value);
  }
}

关于javascript - Angular 2 : Can't add form group to form array in reactive Forms，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41517389/