Question

所以我有一个表格，里面有一些基本的家庭信息。然后我希望将部分表格添加到家庭的孩子身上。我正在使用反应形式，看起来像这样：

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

现在，在用户界面的某个时刻，将会有儿童姓名的输入，并可选择添加更多内容。我可以以编程方式向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

当然可以。实施可能会更好，但是这样的事情：

StoreModule

因此每个孩子的每个formControl都会被命名为一个数字。

此实现基于Renderer2（推荐使用＆＃34;直接＆＃34;操作DOM元素）

角动态表单组输入

1 个答案: