Angular 动态表单组输入

Question

所以我有一个包含一些基本家庭信息的表格。然后我想有部分表格添加到children的家族中。我正在使用响应式表单，看起来像这样：

    this.details = fb.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      email: ['', Validators.compose([Validators.required, Validators.email])],
      phone: ['', Validators.required]
    });

现在，在 UI 中的某个时刻，将有 children 个名称的输入，并可选择添加更多。我可以通过编程方式向 this.details 组添加更多输入字段吗？

更新

@incognito 的回答非常适合我最初提出的问题。它将保留为选定的答案。在深入研究他的答案时，我还发现了 FormArray，这是我最终选择的方向，所以我想在这里添加它。看起来像：

this.form = this.fb.group({
  ...
  children: this.fb.array([
    this.fb.group({
      name: ['', Validators.required],
      age: ['', Validators.required],
      gender: ['', Validators.required]
    })
  ])
});

然后，视图如下所示：

<form [formGroup]="form">
    <div *ngFor="let child of form.controls.children.controls; let i = index;"
         formArrayName="children"
         class="childForm">
        <div [formGroupName]="i"
             class="row">
            <div class="col-md-4">
                <input type="text"
                       class="form-control"
                       formControlName="name">
            </div>
            <div class="col-md-4">
                <input type="number"
                       class="form-control"
                       formControlName="age">
            </div>
            <div class="col-md-4">
                <select class="form-control"
                        formControlName="gender">
                    <option value="male">Male</option>
                    <option value="female">Female</option>
                </select>
            </div>
        </div>
    </div>
    <button (click)="addChild()"
            class="btn btn-primary">
        <i class="fa fa-plus"></i> Add Another Child
    </button>
</form>

表单底部按钮中引用的 addChild 函数如下所示：

addChild() {
  const children = <FormArray>this.form.get('children');
  children.push(this.fb.group({
    name: [''],
    age: [''],
    gender: ['']
  }));
}

所以，这又是一种不同的处理方式，我是在深入了解@incognito 的回答后才发现的。谢谢@incognito！

Answer 1

当然可以。实现可能会更好，但像这样：

<button (click)="addKid()"> Add kid </button

numberOfKids: number = 0;

addKid() {
 this.numberOfKids++;
 let input = this.renderer.createElement('input');
 this.renderer.appendChild(form, input);
 this.renderer.setProperty(input, 'formControlName', this.numberOfKids); 

 this.details.addControl(this.numberOfKids, new FormControl(''));
}

所以每个孩子的每个 formControl 都将被命名为一个数字。

此实现基于 Renderer2（"directly" 操作 DOM 元素的推荐方式）

Angular 动态表单组输入

Angular dynamic form group inputs

javascript

angular2-forms

angular