用formArray实现动态表单
嗯，事情更复杂。我做了一个stackblik，见demo
我将尝试解释如何扩展 https://angular.io/guide/dynamic-form 以允许表单数组。
首先我们需要创建一个新类型的问题，一个 questionArray
import { QuestionBase } from './question-base';
export class ArrayQuestion extends QuestionBase<string> {
controlType = 'array';
type: any;
constructor(options: {} = {}) {
super(options);
}
}
我们必须更改问题库以添加新属性“children”
export class QuestionBase<T> {
value: T;
...
children:any[];
constructor(options: {
value?: T,
...
children?:any
} = {}) {
this.value = options.value;
...
this.children=options.children || null;
}
}
添加更改问题控制服务以允许管理 formArrays
toFormGroup(questions: QuestionBase<any>[]) {
let group: any = {};
questions.forEach(question => {
//If the control type is "array" we create a FormArray
if (question.controlType=="array") {
group[question.key]=new FormArray([]);
}
else {
group[question.key] = question.required ? new FormControl(question.value || '', Validators.required)
: new FormControl(question.value || '');
}
});
return new FormGroup(group);
}
好吧，我们将 dynamic-form.component 转换为显示一个 FormArray
<div *ngFor="let question of questions" class="form-row">
<ng-container *ngIf="question.children">
<div [formArrayName]="question.key">
<div *ngFor="let item of form.get(question.key).controls; let i=index" [formGroupName]="i">
<div *ngFor="let item of question.children">
<app-question [question]="item" [form]="form.get(question.key).at(i)"></app-question>
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="!question.children">
<app-question [question]="question" [form]="form"></app-question>
</ng-container>
</div>
就这样吧。那么，如何增加和减少 formArrays？我们有两个按钮
<button (click)="addControls('myArray')"> Add </button>
<button (click)="removeControls('myArray')"> Remove </button> <br><br>
还有两个函数addControls和removeControls
addControls(control: string) {
let question: any = this.questions.find(q => q.key == control);
let children = question ? question.children : null;
if (children)
(this.form.get(control) as FormArray).push(this.qcs.toFormGroup(children))
}
removeControls(control: string){
let array=this.form.get(control) as FormArray;
array.removeAt(array.length-1);
}
更新我忘了添加问题和示例：
let questions: QuestionBase<any>[] = [
new TextboxQuestion({
key: 'firstName',
label: 'First name',
value: '',
required: true,
order: 1
}),
new TextboxQuestion({
key: 'lastName',
label: 'Last name',
value: '',
required: true,
order: 2
}),
new ArrayQuestion({
key: 'myArray',
value: '',
order: 3,
children: [
new TextboxQuestion({
key: 'emailAddress',
label: 'Email',
type: 'email',
order: 3
}),
new DropdownQuestion({
key: 'brave',
label: 'Bravery Rating',
options: [
{ key: 'solid', value: 'Solid' },
{ key: 'great', value: 'Great' },
{ key: 'good', value: 'Good' },
{ key: 'unproven', value: 'Unproven' }
],
order: 4
})
]
})
];