噗，允许fromGroups和formArray是一个庞大而复杂的代码改进，但我们会尝试。
首先我们要改变一些 DynamicFormBuilderComponent
我们将创建一个函数getForm来递归创建formGroup
getForm(group: FormGroup, fields: any[]) {
for (let f of fields) {
switch (f.type) {
case "group":
group.addControl(f.name, new FormGroup({}));
this.getForm(group.get(f.name) as FormGroup, f.children);
break;
case "checkbox":
group.addControl(f.name, new FormGroup({}));
const groupOption = group.get(f.name) as FormGroup;
for (let opt of f.options) {
groupOption.addControl(opt.key, new FormControl(opt.value));
}
break;
case "array":
group.addControl(f.name, new FormArray([]));
const array = group.get(f.name) as FormArray;
if (f.value)
{
f.value.forEach(x=>array.push(this.addGroupArray(f.children)))
array.patchValue(f.value)
}
break;
default:
group.addControl(
f.name,
new FormControl(f.value || "", Validators.required)
);
break;
}
}
在我们创建对象fields 之前看到，最后将对象字段添加到formGroup。使用这个函数，我们直接创建了一个空的 formGroup，并使用group.addControl 添加了 FormControls 或 FormGroup 或 FormArray。这允许我们在必要时调用递归函数。
所以，我们在 ngOnInit 中制作
ngOnInit() {
this.getForm(this.form, this.fields);
}
看到我们可以使用模板变量从父级访问表单
<dynamic-form-builder #dynamic ..>
{{dynamic.form?.value|json}}
以及我如何确定表单具有“精确”模型 - 在我们有一个带有 {"fields:"exactModel"} 的对象之前-
我们需要一个辅助函数来创建一个FormArray的formGroup
addGroupArray(fields:any[])
{
const group:FormGroup=new FormGroup({})
fields.forEach(x=>{
group.addControl(x.name,new FormControl(null,x.required?Validators.required:null))
})
return group
}
我们的 FieldBuilderComponent 会考虑新的两种类型的字段：“数组”和“组”。我去把它放在一个字段集中
<!--in case group we repeat the field-builder using
as form the "getFormGroup" and as field "field.children"
-->
<fieldset *ngSwitchCase="'group'">
<legend>{{field.name}}</legend>
<field-builder *ngFor="let item of field.children"
[form]="getFormGroup(field.name)" [field]="item">
</field-builder>
</fieldset>
<!--in case array we create a table and use the function
"getFormArray"
-->
<fieldset *ngSwitchCase="'array'">
<legend>{{field.name}}</legend>
<table [formArrayName]="field.name">
<tr>
<th *ngFor="let item of field.children">{{item.label}}</th>
<th>
<button class="btn btn-primary" (click)="getFormArray(field.name).push(this.addGroupArray(field.children))">Add</button>
</th>
</tr>
<tr *ngFor="let group of getFormArray(field.name).controls;let i=index" [formGroupName]="i">
<td *ngFor="let item of field.children">
<field-builder noLabel="true" [form]="getFormArray(field.name).at(i)"
[field]="item">
</field-builder>
</td>
<td><button class="btn btn-primary" (click)="getFormArray(field.name).removeAt(i)">Delete</button></td>
</tr>
</table>
</fieldset>
我使用了两个辅助函数，它们只返回“强制转换”的 formGroup 和 formArray
getFormGroup(field:string)
{
return this.form.get(field) as FormGroup
}
getFormArray(field:string)
{
return this.form.get(field) as FormArray
}
看看我们内部是如何调用自己的组件的。我需要添加一个“属性” noLabel 以不显示标签，以防我们管理 FormArrayLabel
//in constructor
constructor(@Attribute('noLabel') noLabel) {
this.noLabel=noLabel || false;
}
并使用
<label *ngIf="!noLabel" ....></label>
我需要在这个组件中再次重复函数addGroupArray（我无法想象另一种方式）
嗯，唯一要考虑的是如何将值下潜到formArray中，看看数组的字段是这样的：
{
type: "array",
name: "arrayName",
value:[{firstName:"array",lastName:"array lastName"}],
children: [
{
type: "text",
name: "firstName",
label: "First Name",
required: true
},
{
type: "text",
name: "lastName",
label: "Last Name",
required: true
}
]
},
通常这是the stackblitz，没有保修
注意：选项的原子应该是
<div [formGroup]="form">
<div class="form-check" *ngFor="let opt of field.options">
<label class="form-check-label">
<input [formControlName]="field.name" class="form-check-input" type="radio" [value]="opt.key" >
{{opt.label}}
</label>
</div>
</div>
更新 真的，我从不喜欢在具有真/假值的数组中“拆分”一系列复选框。更自然的值是，例如"c,f" 并选中 "cooking" 和 "fishing" 复选框。
首先是使用[ngModel] 和(ngModelChange) 更改“原子复选框”。首先我们要创建两个辅助函数：
//a simple "getter" to get the value
get value() {
return this.form ? this.form.get(this.field.name).value : null;
}
//we pass "checked" and the "key" of the option
change(checked: boolean, key: any) {
const oldvalue = this.form.get(this.field.name).value || null;
//if has no value
if (!oldvalue) {
//use setValue with the "key" (if checked) or null
this.form.get(this.field.name).setValue(checked ? "" + key : null);
return;
} else {
//in value store all the options that fullfilled with the condition
const value = checked
? this.field.options.filter( //is in the old value or is the key
x => oldvalue.indexOf(x.key) >= 0 || x.key == key
)
: this.field.options.filter( //is in the old value and is not the key
x => oldvalue.indexOf(x.key) >= 0 && x.key != key
);
//we give the value null if there're no options that fullfilled
//or a join of the keys
this.form
.get(this.field.name)
.setValue(value.length > 0 ? value.map(x => x.key).join(",") : null);
}
}
好吧，现在我们可以使用我们的 [ngModel] 和 (ngModelChange)。我们需要告诉 Angular 那是一个“独立的”
<div [formGroup]="form">
<div *ngFor="let opt of field.options" class="form-check form-check">
<label class="form-check-label">
<input
[ngModel]="value && value.indexOf(opt.key) >= 0"
(ngModelChange)="change($event, opt.key)"
[ngModelOptions]="{ standalone: true }"
class="form-check-input"
type="checkbox"
id="inlineCheckbox1"
value="option1"
/>
{{ opt.label }}</label>
</div>
</div>
所以，我们去掉了out函数getForm中“复选框”的大小写
getForm(group: FormGroup, fields: any[]) {
for (let f of fields) {
switch (f.type) {
case "group":
...
break;
case "array":
....
break;
default:
...
break;
}
}
}