来自JSON的角8动态形式
来自JSON的角8动态形式
提问于 2019-12-11 08:20:53
我试图从JSON模式递归地生成动态表单，但我很难找到表单控件。下面是代码示例。
我知道这个错误
错误:无法找到名称为“createdAt”的控件
我尝试过不同的方法，但仍然有一个问题。我知道我错过了一些事所以请帮帮忙。任何帮助都将不胜感激。
app.components.ts
export class AppComponent implements OnInit {
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: TableFilter): 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>
<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 }"></ng-container>
</div>
</ng-container>
<ng-template #default>
<div class="col-md-3">
<div class="form-group">
<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>回答 2
Stack Overflow用户
回答已采纳
发布于 2019-12-11 09:24:23
您必须在#default ng-模板上设置from组名称。
https://stackblitz.com/edit/angular-mc5zsd?file=src%2Fapp%2Fapp.component.html
Stack Overflow用户
发布于 2020-10-08 05:33:54
嗨，我正在像上面那样显示和编辑递归的JSON对象，但是结构不同。
Error: ERROR TypeError: Cannot read property 'name' of undefined
at Object.eval [as updateDirectives]这是我的代码https://stackblitz.com/edit/angular-nwuuan?file=src/app/app.component.html
app.component.ts
import { Component } from '@angular/core';
import {FormGroup,FormControl,FormBuilder} from '@angular/forms'
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
filterForm: FormGroup;
filterFields: any[];
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.filterFields = [
{"signature": "[a][b][c][d]",
"id": "start3",
"passwd": "going",
"url": "https://example.com",
"code": "ME_GOOD",
"type": "ABCD",
"main":{
"description": "development",
"id": "98gbnuikmvgy6",
"name": "satsba",
"type": "dcba",
"upload": "2019-09-04 18:17:23.222",
"by": "example@gmail.com",
"version": "0.1"}} ];
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('field:',field);
});
// console.log('baseForm:',baseForm);
return baseForm;
}
generateFormGroup(baseForm: FormGroup, field): FormGroup|FormControl {
const formGroup = this.fb.group({});
Object.keys(field).forEach(function(key) {
formGroup.addControl(key, new FormControl(""));
});
console.log('formGroup',formGroup);
return formGroup;
}
}app.component.html
<pre>{{filterForm?.value|json}}</pre>
<form [formGroup]="filterForm" class="filter-form">
<ng-template #recursiveList let-filterFields let-fromGroup="fromGroup">
<ng-container *ngFor="let filter of filterFields let i=index">
<ng-container *ngFor="let item of filter | keyvalue">
<p>{{item.key}}</p>
<!-- <ng-container *ngIf="item.group; else default;"> -->
<!-- <div [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="form-group" >
<input [type]="text" [formControlName]="item.key" [name]="item.key" [value]="item.value"/>
</div>
<!-- </ng-template> -->
</ng-container>
</ng-container>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: filterFields }"></ng-container>
</form>我也是跟踪https://stackblitz.com/edit/angular-6n6nbd?file=src%2Fapp%2Fapp.component.html，但还没有运气。
谢谢你提前帮忙。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59281460
复制相关文章
相似问题
腾讯云开发者
