我有一个概念问题,想要一些建议。 所以我有一个组件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中,我将动态生成多个myFormArrays。如果这令人困惑,假设我这样做:
<myFormArray [classFields] = "element.subArray"/>
<myFormArray [classFields] = "element2.subArray"/>
<button (click) = "save()"> //I don't know how to implement this!
在页面的最后,我想要一个保存按钮,它可以以某种方式获取用户输入到所有表单的所有值,并将所有这些数据推送到服务组件中的数组。我不确定如何做这部分。请注意,我不希望为每个动态生成的表单组件提供单独的提交按钮。
我如何实现此功能?谢谢!
答案 0 :(得分:4)
你的开始很好,但你必须以不同的方式编写源代码。
而不是此示例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
现在您可以在ngOnInit
中定义新的空FormGroup,如下所示:
ngOnInit() {
this.myForm = this.formBuilder.group({});
}
步骤3.动态创建FormControls(app.component.ts)
现在,您可以通过迭代FormControls
动态创建classFields
。为此,我建议创建自己的功能。此函数有两个参数:arrayName
和classFields
。使用arrayName
,我们可以设置FormArray
- 控件的自定义名称。 classFields
- 我们将用于迭代的数组。我们为空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
- ngOnInit
中的功能。
步骤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>
这里我们有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
varibales。 (我知道,这个变量可以有更好的名字:-))。
步骤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。