html - Angular2 动态生成响应式表单

Question

我有一个概念问题，想要一些建议。所以我有一个组件 myFormArray，它是一种 react 形式。它接受一个输入数组，并相应地创建一些 FormControl。

@Component({
selector: 'myFormArray',
templateUrl: 'formarray.component.html'
})

export class FormArrayComponent{ 
@Input() classFields: any[];  

userForm = new FormGroup();

ngOnInit(){
// psuedocode here, but I know how to implement
    for (# of entries in classFields)
    userForm.FormArray.push(new FormControl());
}

现在，在我的父级 html 中，我将动态生成多个 myFormArray。如果这令人困惑，假设我正在这样做:

     <myFormArray [classFields] = "element.subArray"/>
     <myFormArray [classFields] = "element2.subArray"/>
     <button (click) = "save()"> //I don't know how to implement this!

在页面的最后，我想要一个保存按钮，它可以以某种方式获取用户输入到所有表单中的所有值，并将所有这些数据推送到服务组件中的数组。我不确定该怎么做。请注意，我不希望每个动态生成的表单组件都有单独的提交按钮。

我将如何实现此功能？谢谢!

Answer 1

你的开始很好，但你必须以不同的方式编写你的源代码。

在这个例子中，app.components.ts 是主组件，my-array.component.ts 是子组件。

我们的测试数据

classFields1: any[] = ['firstname', 'lastname', 'email', 'password'];
classFields2: any[] = ['country', 'city', 'street', 'zipcode'];

第 1 步。使用 FormBuilder 创建表单 (app.component.ts)

您必须像这样从 @angular/forms 导入 FormBuilder 和 FormGroup:

import { FormBuilder, FormGroup } from '@angular/forms';

然后在构造函数中定义:

constructor(private formBuilder: FormBuilder) { }

第 2 步。定义新的空 FormGroup

现在您可以像这样在 ngOnInit 中定义新的空 FormGroup:

ngOnInit() {
  this.myForm = this.formBuilder.group({});
}

第 3 步。动态创建 FormControls (app.component.ts)

现在您可以开始通过 classFields 的迭代动态创建您的 FormControls。为此，我建议创建自己的函数。这个函数有两个参数:arrayName 和classFields。使用 arrayName，我们可以设置我们的 FormArray 控件的自定义名称。 classFields - 我们将用于迭代的数组。我们为空的 FormArray 创建常量变量，我们称之为 arrayControls。在此之后，我们遍历 classFields 并为每个元素创建 FormControl，我们称之为 control，并推送此 control进入 arrayControls。在此函数的末尾，我们使用 arrayName 将我们的 arrayControls 添加到具有自定义名称的表单中。这是一个例子:

createDynamicArrayControls(arrayName: string, classFields: any[]) {
    const defaultValue = null;
    const arrayControls: FormArray = this.formBuilder.array([]);
    classFields.forEach(classField => {
      const control = this.formBuilder.control(defaultValue, Validators.required);
      arrayControls.push(control);
    })
    this.myForm.addControl(arrayName, arrayControls);
  }

从@angular/forms导入FormControl和FormArray。您的导入行应该是这样的:

import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';

现在调用 createDynamicFormControls - ngOnInit 中的函数。

第 4 步。此动态表单 (app.component.html) 的 HTML 模板

对于这个例子，我创建了以下模板:

<h1>My Form</h1>
<form [formGroup]="myForm">
  <div formGroupName="test1">
    <app-my-array [classFields]="classFields1" [arrayFormName]="myForm.controls.test1"></app-my-array>
  </div>
  <div formGroupName="test2">
    <app-my-array [classFields]="classFields2" [arrayFormName]="myForm.controls.test2"></app-my-array>
  </div>
  <button type="button" (click)="saveForm()">Submit</button>
</form>

这里我们有新的 div 元素，带有 formGroupName。这个组名是我们表单中的arrayName。我们通过 @Input 将表单数组提供给 my-array.component。

步骤 5.MyArrayComponent

现在这个组件非常简单:

import { Component, OnInit, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-my-array',
  templateUrl: './my-array.component.html',
  styleUrls: ['./my-array.component.css']
})
export class MyArrayComponent implements OnInit {

  @Input() classFields: any[];
  @Input() arrayFormName: FormGroup;

  constructor() { }

  ngOnInit() { }

}

这里我们只有两个 @Input 变量。 (我知道，这个变量可以有更好的名字 :-))。

第 6 步。MyArrayComponent 的 HTML

<div [formGroup]="arrayFormName">
  <div *ngFor="let class of arrayFormName.controls; let index = index;">
    <label [for]="classFields[index]">{{ classFields[index] }}</label>
    <input type="text" [id]="classFields[index]" [formControlName]="index" />
  </div>
</div>
<br>

这是 Stackblitz 上的工作示例:https://stackblitz.com/edit/angular-wawsja

如果您有任何问题，请在评论中问我或阅读有关响应式表单的 Angular 文档 here .