javascript - Angular 动态表单组输入

Question

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

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

现在，在 UI 的某个位置，将有 child 名字的输入，并可以选择添加更多。我能否以编程方式将更多输入字段添加到 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]
    })
  ])
});

然后， View 看起来像:

<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(''));
}

因此每个 child 的每个 formControl 都将被命名为一个数字。

此实现基于Renderer2(推荐“直接”操作DOM元素的方式)