角度 8 递归形式

Question

我正在尝试从 JSON 模式递归生成动态表单，但我正在努力找不到表单控件。下面是代码示例。

我收到此错误

ERROR Error: Cannot find control with name: 'individualPerson'

我尝试了不同的方法，但仍然存在问题。 我知道我想念什么，所以请帮忙。 任何帮助将不胜感激。

模板端出现问题

app.components.ts

export class AppComponent {
filterForm: FormGroup;
filterFields: any[];
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.filterFields = [
{
key: "common",
title: "main fields",
group: [
{
key: "createdAt",
title: "Create Date",
type: "date"
},
{
key: "individualPerson",
title: "Physical Person",
group: [
{
key: "firstname",
title: "First Name",
type: "text"
},
{
key: "lastname",
title: "Last Name",
type: "text"
},
{
key: "phone",
title: "Phone Number",
type: "text"
},
{
key: "citizenshipCountry",
title: "Country",
type: "text"
}
]
},
{
key: "legalPerson",
title: "Legal Person",
group: [
{
key: "brandname",
title: "Brand Name",
type: "text"
},
{
key: "fullname",
title: "Full Name",
type: "text"
},
{
key: "phone",
title: "Phone",
type: "text"
},
{
key: "registrationCountry",
title: "Country",
type: "text"
}
]
}
]
}
];
this.filterForm = this.generateFilterForm();
}
generateFilterForm(): FormGroup {
const baseForm = this.fb.group({});
this.filterFields.forEach(field => {
baseForm.addControl(field.key, this.generateFormGroup(baseForm, field));
});
console.log(baseForm);
return baseForm;
}
generateFormGroup(baseForm: FormGroup, field): FormGroup {
if (field.group) {
const formGroup = this.fb.group({});
field.group.forEach(item => {
formGroup.addControl(item.key, this.generateFormGroup(formGroup, item));
});
return formGroup;
} else {
baseForm.addControl(field.key, new FormControl(""));
}
return baseForm;
}
}

app.component.html

<form [formGroup]="filterForm" class="filter-form">
<ng-template #recursiveList let-filterFields let-fromGroup="fromGroup">
<ng-container *ngFor="let item of filterFields">
<ng-container *ngIf="item.group; else default;">
<p>{{item.title}}</p>
<div class="row pb-4" [formGroupName]="item.key">
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.group, fromGroup: {name: item.key} }"></ng-container>
</div>
</ng-container>
<ng-template #default>       
<div class="col-md-3">
<div class="form-group" [formGroupName]="fromGroup.name">
<input [type]="item.type" [formControlName]="item.key" [placeholder]="item.title" [name]="item.key" />
</div>
</div>
</ng-template>
</ng-container>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: filterFields }"></ng-container>
</form>

Answer 1

你的代码中有一些奇怪

的东西1.-更改函数 generateFormGroup 以在 case 字段中返回一个简单的 FormControl.group=false

generateFormGroup(baseForm: FormGroup, field): FormGroup|FormControl {
if (field.group) {
const formGroup = this.fb.group({});
field.group.forEach(item => {
formGroup.addControl(item.key, this.generateFormGroup(formGroup, item));
});
return formGroup;
}
return new FormControl("");
}}

在递归.html将formGroup传递给模板并使用[formControl]和[formGroup](我无法使用formControlName和formGroupName获得它(。有些人喜欢 - 看到我更改了一些放置表单组的位置-

<form *ngIf="filterForm" [formGroup]="filterForm" class="filter-form">
<ng-container *ngTemplateOutlet="recursiveList; 
context:{ $implicit: filterFields,formGroup:filterForm }">
</ng-container>
</form>
<ng-template #recursiveList let-filterFields let-formGroup="formGroup">
<div class="form-group">
<ng-container *ngFor="let item of filterFields">
<p>{{item.title}}</p>
<ng-container *ngIf="item.group; else default;">
<div class="row pb-4">
<div [formGroup]="formGroup.get(item.key)">
<ng-container
*ngTemplateOutlet="recursiveList; 
context:{ $implicit: item.group, formGroup: formGroup.get( item.key)}">
</ng-container>
</div>
</div>
</ng-container>
<ng-template #default>
<div class="col-md-3">
<input [type]="item.type" [formControl]="formGroup.get(item.key)" 
[placeholder]="item.title" [name]="item.key" />
</div>
</ng-template>
</ng-container>
</div>
</ng-template>

你可以在堆栈闪电战中看到