将一组字段动态添加到反应式表单

Question

我有 2 个输入字段：姓名和姓氏。我有 2 个按钮：提交和 'add a person'。单击 'add a person' 应添加一组新字段（名称和姓氏）。如何实现？我找到了如何动态添加单个输入字段的解决方案，但在这里我需要添加一个 set

我的代码现在没有 'add a person' 功能：

import { FormControl, FormGroup, Validators } from '@angular/forms';
export class AppComponent implements OnInit {
   form: FormGroup;
   constructor(){}
   ngOnInit(){
     this.form = new FormGroup({
       name: new FormControl('', [Validators.required, Validators.minLength(2)]),
       lname: new FormControl('', [Validators.required, Validators.minLength(2)])
     });
   }
 ....
 }

模板：

<form [formGroup]="form" (ngSubmit)="submit()">
    Name: <input type="text" formControlName="name">
    Last Name: <input type="text" formControlName="lname">
    <button type="button">Add a Person</button>
    <button type="submit">Submit</button>
</form>

Answer 1

你需要的是FormArray。给定具有两个 FormControls name 和 surname 的多个元素，就像在您的示例中一样，您可以这样做： https://stackblitz.com/edit/angular-ztueuu

这是正在发生的事情：

您像以前一样定义表单组，但使用 FormArray 类型

的一个字段创建它

ngOnInit() {
  this.form = this.fb.group({
    items: this.fb.array([this.createItem()])
  })
}

接下来定义我们在上面使用的辅助方法 createItem() 使我们与要相乘的一组控件分组

createItem() {
  return this.fb.group({
    name: ['Jon'],
    surname: ['Doe']
  })
}

最后是您希望在此集合中乘以项目的方法：

addNext() {
  (this.form.controls['items'] as FormArray).push(this.createItem())
}

将此与下面的 html 合并。我们正在遍历数组项并显示组中的字段。这里的表单组名是数组索引

<form [formGroup]="form" (ngSubmit)="submit()">
  <div formArrayName="items"
    *ngFor="let item of form.controls['items'].controls; let i = index">
    <div [formGroupName]="i">
      <input formControlName='name'>
      <input formControlName='surname'>
    </div>
  </div>
  <button type="button" (click)="addNext()">Add Next</button>
  <button type="submit">Submit</button>
</form>

并且您可以创建包含扩展项目集的表单。

将一组字段动态添加到反应式表单

Dynamically add a set of fields to a reactive form

angular

angular-reactive-forms