带有来自 JSON 的元素组的角度动态表单 [英] Angular dynamic form with groups of elements getting from JSON
问题描述
我正在做 Angular 应用程序和构建 Angular 动态表单.
在这里，我试图将表单分为两部分，例如人名和个人详细信息..
对于人名，它可以用于分组，但对于个人详细信息，它不起作用.
HTML:
<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-容器><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-容器>JSON:
jsonData: any = [{"元素类型": "组","key": "person_name",孩子们": [{"elementType": "文本框","class": "col-12 col-md-4 col-sm-12","key": "first_name","label": "名字","类型": "文本",价值": ""，必需":真的，最小长度":3，最大长度":20，订单":1},{"elementType": "文本框","class": "col-12 col-md-4 col-sm-12","key": "last_name","label": "姓氏","类型": "文本",价值": ""，必需":真的，订单":2}],},{"元素类型": "组","key": "personal_details",孩子们": [{"elementType": "文本框","class": "col-12 col-md-4 col-sm-12","key": "电子邮件","label": "电子邮件","类型": "文本",价值": ""，必需":真的，最小长度":3，最大长度":20，订单":1},{"elementType": "文本框","class": "col-12 col-md-4 col-sm-12","key": "移动","label": "手机","类型": "文本",价值": ""，必需":真的，订单":2}],},];工作 Stckblitz:https://stackblitz.com/编辑/angular-x4a5b6-5uj52y
在工作时一切正常.. 已经为人名创建了一个组并且它工作正常但是对于个人详细信息我无法找到输入框..
单个表单需要在每个部分上方拆分标题，这是该表单的要求.
这里 {{question.key}} 在每个输入框中显示名称，但我只需要在顶部显示 Person Name .. 因为它是父title 和First Name, Last Name 等其余的都是输入框标签.. 如何在每个部分的前面单独显示父标题(人名(有名字和姓氏)，个人详细信息(有电子邮件和手机))...
我希望将订单按如下方式拆分，每个订单分别带有标题.
人名
->名->姓个人资料
->电子邮件->手机号码如果我对上述方法有误，请帮助我拆分此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:
dynamic-form.component.ts
this.form = this.qcs.toFormGroup(this.questions);dynamic-form.component.html
<app-dynamic-group [questions]="questions" [form]="form"></app-dynamic-group>现在，您不需要在您的 DynamicGroupComponent 上实现 ControlValueAccessor.您将 FormGroup 传递给它，它应该足以动态生成表单.
dynamic-group.component.ts
@Component({选择器:'应用动态组'，templateUrl: './dynamic-group.component.html'})导出类 DynamicGroupComponent {@Input() 表单:FormGroup；@Input() 问题: QuestionBase[] = [];} dynamic-group.component.html
<app-question *ngIf="!question.children" [question]="question" [form]="form"></app-question><应用动态组*ngIf="question.controlType === 'group' && question.children && question.children.length"[form]="form.get(question.key)"[问题]="question.children"></app-dynamic-group>I am making angular application and building of angular dynamic form.
Here i am trying to split of form in two parts such as Person Name and Personal details..
For Person Name its working for grouping but for Personal details its not working.
The 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
}
],
},
];
The working Stckblitz: https://stackblitz.com/edit/angular-x4a5b6-5uj52y
As of working everything works fine.. Already a group was made for Person name and its working fine but for Personal details i am unable to find the input boxes..
A single form needs to get split up with titles above each part thats the requirement of this form.
Here the {{question.key}} displays the name on each input boxes but i need to display only Person Name at top.. Because it is the parent title and the remaining such as First Name, Last Name are input box labels.. How to show the parent title alone in before of each part (Person Name (Has First and Last Name) , Personal Details (Has Email and Mobile))...
I would like to have order split up exactly like the below with title for each respectively.
Person Name
-> First Name
-> Last Name
Personal Details
-> Email
-> Mobile Number
If i am wrong with the above approach then kindly help me to split this https://stackblitz.com/edit/angular-x4a5b6-geesde dynamic form like the below given approach..
My form needs to look like this https://stackblitz.com/edit/angular-zc34qr but it needs to be in pure angular dynamic form and JSON loading..
Kindly help me to create a group Personal Details like the Person Name which was already created and working..
Stuck for a long duration in this kindly help me please...
I don't understand why you creates additional formGroup here:
this.form = new FormGroup({main: innerForm});
Just use formGroup you're getting from your service:
dynamic-form.component.ts
this.form = this.qcs.toFormGroup(this.questions);
dynamic-form.component.html
<app-dynamic-group [questions]="questions" [form]="form"></app-dynamic-group>
Now, you do not need to implement ControlValueAccessor on your DynamicGroupComponent. You're passing FormGroup to it and it should be enough to generate form dynamically.
dynamic-group.component.ts
@Component({
selector: 'app-dynamic-group',
templateUrl: './dynamic-group.component.html'
})
export class DynamicGroupComponent {
@Input() form: FormGroup;
@Input() questions: QuestionBase<any>[] = [];
}
dynamic-group.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>
这篇关于带有来自 JSON 的元素组的角度动态表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
