将一组字段动态添加到响应式表单中 [英] Dynamically add a set of fields to a reactive form

问题描述

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

我的代码现在没有添加一个人"功能:

import { FormControl, FormGroup, Validators } from '@angular/forms';导出类 AppComponent 实现 OnInit {表格:表格组；构造函数(){}ngOnInit(){this.form = new FormGroup({名称:new FormControl('', [Validators.required, Validators.minLength(2)]),lname: new FormControl('', [Validators.required, Validators.minLength(2)])});}....}

模板:

名称:<input type="text" formControlName="name">姓氏:<input type="text" formControlName="lname"><button type="button">添加一个人</button><button type="submit">提交</button></表单>

解决方案

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

这是正在发生的事情:

您可以像以前一样定义表单组，但使用 FormArray 类型的一个字段

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

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

createItem() {返回 this.fb.group({姓名:['乔恩']，姓氏:['Doe']})}

最后是你想要乘以这个集合中的项目的方法:

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

将其与下面的 html 结合起来.我们正在迭代数组项并显示组中的字段.这里的表单组名是数组的索引.

<div formArrayName="items"*ngFor="let item of form.controls['items'].controls; let i = index"><div [formGroupName]="i"><input formControlName='name'><input formControlName='姓氏'>

<button type="button" (click)="addNext()">添加下一个</button><button type="submit">提交</button></表单>

并且您可以创建具有扩展项目集的表单.

I have 2 input fields: name and last name. I have 2 buttons: submit and 'add a person'. Clicking on 'add a person' should add a new set of fields (name and last name). How to achieve that? I found solutions how to add single input fields dynamically, but here I need to add a set

My code now without 'add a person' functionality:

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)])
     });
   }
 ....
 }

template:

<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>

解决方案

What you need is FormArray. Given multiple elements with two FormControls name and surname like in your example you could do this: https://stackblitz.com/edit/angular-ztueuu

Here is what's happening:

You define form group as you did but create it with one field of FormArray type

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

Next you define helper method we use above createItem() to make us group with set of controls you want to multiply

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

And lastly the method you wanted to multiply items in this set:

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

Combine this with html below. We are iterating over array items and displaying fields from group. Form group name here is index of array.

<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>

And you can create form with expanding set of items.

这篇关于将一组字段动态添加到响应式表单中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！