javascript - 具有从 JSON 获取的元素组的 Angular 动态表单
问题描述
我正在制作角度应用和角度动态形式的构建。
在这里,我试图将表单拆分为两部分,例如人名和个人详细信息。
对于人名,它可以用于分组,但对于个人详细信息,它不起作用。
的HTML:
<div *ngIf="form">
<div *ngFor="let question of questions" class="form-row" [formGroup]="form">
<ng-container *ngIf="!question.children">
<app-question [question]="question" [form]="form"></app-question>
</ng-container>
<ng-container *ngIf="question.controlType === 'group' && question.children && question.children.length > 0">
<app-dynamic-group [questions]="question.children" [form]="form.controls[question.key]" [key]="question.key" [formControlName]="question.key"></app-dynamic-group>
</ng-container>
</div>
</div>
JSON:
jsonData: any = [
{
"elementType": "group",
"key": "person_name",
"children": [
{
"elementType": "textbox",
"class": "col-12 col-md-4 col-sm-12",
"key": "first_name",
"label": "First Name",
"type": "text",
"value": "",
"required": true,
"minlength": 3,
"maxlength": 20,
"order": 1
},
{
"elementType": "textbox",
"class": "col-12 col-md-4 col-sm-12",
"key": "last_name",
"label": "Last Name",
"type": "text",
"value": "",
"required": true,
"order": 2
}
],
},
{
"elementType": "group",
"key": "personal_details",
"children": [
{
"elementType": "textbox",
"class": "col-12 col-md-4 col-sm-12",
"key": "email",
"label": "Email",
"type": "text",
"value": "",
"required": true,
"minlength": 3,
"maxlength": 20,
"order": 1
},
{
"elementType": "textbox",
"class": "col-12 col-md-4 col-sm-12",
"key": "mobile",
"label": "Mobile",
"type": "text",
"value": "",
"required": true,
"order": 2
}
],
},
];
工作的 Stckblitz:https ://stackblitz.com/edit/angular-x4a5b6-5uj52y
工作时一切正常.. 已经为人名创建了一个组,并且工作正常,但是对于个人详细信息,我找不到输入框..
单个表单需要与每个部分上方的标题分开,这是该表单的要求。
这里{{question.key}}
显示每个输入框上的名称,但我只需要显示Person Name
在顶部。因为它是父标题,其余的如First Name
,Last Name
是输入框标签。如何在每个部分的前面单独显示父标题(人名(有名字和姓氏),个人详细信息(有电子邮件和手机))...
我希望将订单完全按照下面的方式进行拆分,并分别为每个名称提供标题。
人名
-> First Name
-> Last Name
个人资料
-> Email
-> Mobile Number
如果我对上述方法有误,请帮助我拆分此https://stackblitz.com/edit/angular-x4a5b6-geesde动态形式,如下面给出的方法..
我的表单需要看起来像这样https://stackblitz.com/edit/angular-zc34qr但它需要采用纯角度动态形式和 JSON 加载..
请帮助我创建一个Personal Details
像Person Name
已经创建和工作的组..
卡在这很长一段时间,请帮助我...
解决方案
我不明白你为什么在这里创建额外的 formGroup:
this.form = new FormGroup({main: innerForm});
只需使用您从服务中获得的 formGroup :
动态form.component.ts
this.form = this.qcs.toFormGroup(this.questions);
动态form.component.html
<app-dynamic-group [questions]="questions" [form]="form"></app-dynamic-group>
现在,您不需要在 DynamicGroupComponent 上实现 ControlValueAccessor。您将 FormGroup 传递给它,它应该足以动态生成表单。
动态组.component.ts
@Component({
selector: 'app-dynamic-group',
templateUrl: './dynamic-group.component.html'
})
export class DynamicGroupComponent {
@Input() form: FormGroup;
@Input() questions: QuestionBase<any>[] = [];
}
动态组.component.html
<div *ngFor="let question of questions" class="form-row">
<app-question *ngIf="!question.children" [question]="question" [form]="form"></app-question>
<app-dynamic-group
*ngIf="question.controlType === 'group' && question.children && question.children.length"
[form]="form.get(question.key)"
[questions]="question.children">
</app-dynamic-group>
</div>
推荐阅读
- ios - 类型“TextView”不符合协议“UIViewRepresentable”
- ruby - Ruby 中 UTF-8 编码字符串中随机索引字符访问的时间复杂度是多少?
- sql - 如何将数字四舍五入到十(总是向上)
- java - TYPE_APPLICATION_OVERLAY 不适用于 Android 10
- python - Python服务器在没有相同网络的情况下获取套接字消息
- jq - jq提取包括ObjectId的数据
- reactjs - 无法在反应中管理多个 jssip 电话会话请求
- c - chdir 在 WINDOWS 环境中使用函数给出不同的输出
- spring - Spring 升级导致 JPA 日期字段以错误的格式序列化
- python - 反转二叉树(递归)