Angular2动态生成反应形式
我有一个概念问题，想听听一些建议。所以我有一个组件，myFormArray，它是一个反应性的形式。它接受一个输入数组，并相应地创建许多FormControls。
@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中，我将动态地生成多个myFormArrays。如果这让人困惑，那么假设我正在这样做：
<myFormArray [classFields] = "element.subArray"/>
<myFormArray [classFields] = "element2.subArray"/>
<button (click) = "save()"> //I don't know how to implement this!在页面的最末端，我想要一个保存按钮，它可以以某种方式获取用户输入到所有表单中的所有值，并将所有这些数据推送到服务组件中的数组中。我不知道该怎么演这部分。请注意，我不希望为每个动态生成的表单组件单独提交按钮。
我将如何实现这个功能？谢谢!
回答 1
Stack Overflow用户
发布于 2017-11-29 09:37:20
您的开始很好，但是您必须以不同的方式编写源代码。
与本例不同，app.components.ts是主组件，my-array.component.ts是子组件。
我们的测试数据
classFields1: any[] = ['firstname', 'lastname', 'email', 'password'];
classFields2: any[] = ['country', 'city', 'street', 'zipcode'];步骤1.使用FormBuilder创建表单(app.component.ts)
您必须像这样从FormBuilder和FormGroup中导入@angular/forms：
import { FormBuilder, FormGroup } from '@angular/forms';然后在构造函数中定义：
constructor(private formBuilder: FormBuilder) { }步骤2.定义新的空FormGrooup
现在您可以在FormGroup中定义新的空ngOnInit，如下所示：
ngOnInit() {
this.myForm = this.formBuilder.group({});
}步骤3.动态创建FormControls (app.component.ts)
现在，您可以通过迭代FormControls开始动态创建classFields。为此，我建议创建自己的函数。该函数获得两个参数：arrayName和classFields。使用arrayName，我们可以设置FormArray-control的自定义名称。classFields-Array，我们将用于迭代。我们为空的FormArray创建常量变量，我们称之为arrayControls。在此之后，我们遍历classFields并为每个元素创建FormControl (我们称之为control )，并将这个control推入arrayControls中。在这个函数的末尾，我们使用arrayControls将我们的arrayName添加到具有自定义名称的表单中。下面是一个示例：
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);
}从FormControl和FormArray导入@angular/forms。你的进口线应该是这样的：
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';现在调用createDynamicFormControls-Function in 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>这里我们有了新的带有formGroupName的div元素。这个组名是我们表单中的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
如果您有什么问题，请在评论中问我，或者阅读角度文档，缩写为这里。
https://stackoverflow.com/questions/47557776
复制相似问题
腾讯云开发者
