Angular2动态生成响应式表单

21 浏览
0 Comments

Angular2动态生成响应式表单

我有一个概念问题，希望能得到一些建议。

我有一个组件，名为myFormArray，它是一个响应式表单。它接收一个输入数组，并根据此数组创建一定数量的FormControls。

@Component({
selector: 'myFormArray',
templateUrl: 'formarray.component.html'
})
export class FormArrayComponent{ 
@Input() classFields: any[];  
userForm = new FormGroup();
ngOnInit(){
// 这里是伪代码，但我知道如何实现
    for (# of entries in classFields)
    userForm.FormArray.push(new FormControl());
}

现在，在我的父 HTML 中，我将动态生成多个myFormArrays。如果这让你感到困惑，就假设我是这样做的：

在页面的最后，我想要一个保存按钮，它可以获取用户在所有表单中输入的所有值，并将所有这些数据推送到一个 Service 组件中的数组中。我不确定如何实现这部分。请注意，我不想为每个动态生成的表单组件都有单独的提交按钮。

如何实现这个功能？谢谢！

0

1 答案

0 Comments

Angular2动态生成响应式表单的原因是需要根据给定的数据动态生成表单控件，并且能够保存用户输入的值。解决方法是使用Angular的FormBuilder和FormGroup来创建表单，并通过循环迭代的方式动态生成表单控件。

首先，需要在app.component.ts文件中引入FormBuilder和FormGroup：

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

然后，在constructor中定义FormBuilder：

constructor(private formBuilder: FormBuilder) { }

接下来，在ngOnInit中创建一个空的FormGroup：

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

然后，可以使用一个函数来动态生成表单控件。这个函数接收两个参数：arrayName和classFields。通过循环迭代classFields，创建一个FormControl，并将其添加到FormArray中。最后，将这个FormArray添加到FormGroup中：

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

在app.component.html中，可以使用formGroupName来设置FormGroup的名称，并通过属性绑定将表单数组传递给my-array.component：

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

在my-array.component中，可以通过@Input装饰器将classFields和arrayFormName作为输入属性传递进来：

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

最后，在my-array.component.html中，使用*ngFor循环迭代表单控件，并使用formControlName属性绑定控件的索引：

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

通过以上步骤，可以实现动态生成响应式表单，并且可以在父组件中保存所有实例的值。

0