Angular 8 递归形式
[英] Angular 8 Recursive Form
本文介绍了Angular 8 递归形式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试从 JSON 模式递归生成动态表单，但我正在为找不到表单控件而苦苦挣扎.这是代码示例.
我收到此错误
错误错误:找不到名称为individualPerson"的控件
我尝试了不同的方法，但仍然存在问题.我知道我想念一些东西，所以请帮忙.任何帮助将不胜感激.
模板端出现问题
app.components.ts
导出类 AppComponent {filterForm:FormGroup；过滤器字段:任何[]；构造函数(私有 fb:FormBuilder){}ngOnInit() {this.filterFields = [{关键:共同"，标题:主要领域"，团体: [{键:createdAt"，title: "创建日期",类型:日期"},{键:个人"，title: "物理人",团体: [{键:名字"，title: "名字",类型:文本"},{键:姓氏"，title: "姓氏",类型:文本"},{键:电话"，title: "电话号码",类型:文本"},{键:公民国家"，title: "国家",类型:文本"}]},{键:法人"，title: "法人",团体: [{关键:品牌"，title: "品牌名称",类型:文本"},{键:全名"，title: "全名",类型:文本"},{键:电话"，title: "电话",类型:文本"},{键:注册国家"，title: "国家",类型:文本"}]}]}];this.filterForm = this.generateFilterForm();}generateFilterForm(): FormGroup {const baseForm = this.fb.group({});this.filterFields.forEach(field => {baseForm.addControl(field.key, this.generateFormGroup(baseForm, field));});控制台日志(基本形式)；返回基表；}generateFormGroup(baseForm: FormGroup, field): FormGroup {如果(字段.组){const formGroup = this.fb.group({});field.group.forEach(item => {formGroup.addControl(item.key, this.generateFormGroup(formGroup, item));});返回表单组；} 别的 {baseForm.addControl(field.key, new FormControl(""));}返回基表；}}
app.component.html
</ng-容器><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"/>
</ng-模板></ng-容器></ng-模板><ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: filterFields }"></ng-container></表单>
解决方案
你的代码有些奇怪
1.-更改您的函数 generateFormGroup 以在 field.group=false 的情况下返回一个简单的 FormControl
generateFormGroup(baseForm: FormGroup, field): FormGroup|FormControl {如果(字段.组){const formGroup = this.fb.group({});field.group.forEach(item => {formGroup.addControl(item.key, this.generateFormGroup(formGroup, item));});返回表单组；}返回新的 FormControl("");}}
在递归 .html 中将 formGroup 传递给模板并使用 [formControl] 和 [formGroup](我无法使用formControlName 和 formGroupName).有些人喜欢 - 看到我改变了一些放置 formGroup 的地方 -
</ng-容器><ng-template #default><div class="col-md-3"><input [type]="item.type" [formControl]="formGroup.get(item.key)"[placeholder]="item.title" [name]="item.key"/>
</ng-模板></ng-容器>
</ng-模板>
您可以在 stackblitz
I'm trying to generate dynamic form recursively from JSON schema, but i'm struggling with form control not being found. Here is Code Examples.
I get this error
ERROR Error: Cannot find control with name: 'individualPerson'
I tried different approaches but there is still a problem. i know i miss something so please help. any help will be appreciated.
Problem occurs on the template side
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>
解决方案
there're some strange in your code
1.-Change your function generateFormGroup to return a simple FormControl in case field.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("");
}}
In recursive .html pass to the template the formGroup and use [formControl] and [formGroup] (I can not get it using formControlName and formGroupName). Some like -see that I changed a few where put the formGroup-
<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>
You can see in the stackblitz
这篇关于Angular 8 递归形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
