Html Angular2动态生成反应形式

我有一个概念问题，希望得到一些建议。 所以我有一个组件，myFormArray，它是一种反应形式。它接受一个输入数组，并相应地创建许多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!

//我不知道如何实现这一点！

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

---

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

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

而不是本例，

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

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

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

然后在构造函数中定义：

constructor(private formBuilder: FormBuilder) { }

第2步。定义新的空表单组

现在，您可以在

ngOnInit

中定义新的空表单组，如下所示：

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

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

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

第3步。动态创建表单控件（app.component.ts）

现在，您可以通过迭代

类字段

动态创建

表单控件

。为此，我建议创建自己的函数。此函数获取两个参数：

arrayName

和

classFields

。使用

arrayName

我们可以设置

FormArray

控件的自定义名称<代码>类字段-我们将用于迭代的数组。我们为空

FormArray

创建常量变量，我们称之为

arrayControls

。在此之后，我们迭代

类字段

并为每个元素创建

表单控件

，我们称之为

控件

，并将该

控件

推入

数组控件

。在这个函数的末尾，我们使用

arrayName

将

ArrayControl

添加到具有自定义名称的表单中。以下是一个例子：

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 } from '@angular/forms';

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

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

现在调用

ngOnInit

中的

createDynamicFormControls

-函数

第4步。此动态表单的HTML模板（app.component.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>

这里我们只有两个

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

{{classFields[index]}

下面是Stackblitz的工作示例：

---

如果你有什么问题，请在评论中问我，或者阅读关于反应形式的有角度的文档。

在你的文章中有一个完整的dinamic From示例，我已经读过了，但不是我看错了，就是它没有回答我的问题。它只是根据不同的输入更改表单属性，我已经在myFormArray中做过了。这个链接的可能重复也有很大帮助。这是一种引用组件的多个实例的方法，然后您可以从formControl/array/Anwhere中提取信息：感谢您的详细回答！但我的问题是：在我的parent.html中，我将创建MyArrayComponent的两个实例。然后是否可以有一个“保存”按钮，可以同时看到这些实例和其中的值？编辑后的问题反映了我的问题comment@ellusion稍后我会更新我的答案today@ellusion我已经为您更新了我的示例