代码之家 › 专栏 › 技术社区 › Present practice

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

reactive-forms angular-reactive-forms angular

2

Present practice · 技术社区 · 8 年前

我有两个输入字段:姓名和姓氏。我有两个按钮:提交和添加一个人。单击“添加人员”应添加一组新字段(姓名和姓氏)。如何做到这一点?我找到了如何动态添加单个输入字段的解决方案,但在这里我需要添加一个集合

我的代码现在没有“添加人员”功能:

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>

1 回复 | 直到 8 年前

1

13

Marcin Tomczyk 8 年前

你需要的是 FormArray 是的。给定具有两个formcontrols名称和姓氏的多个元素(如示例中所示),可以执行以下操作: https://stackblitz.com/edit/angular-ztueuu

下面是发生的事情:

您可以像以前那样定义表单组,但使用一个字段 福尔马雷 类型

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

接下来定义上面使用的helper方法 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>

您还可以通过展开项集来创建表单。