I am currently developing an Angular application and working on creating a dynamic form using Angular.
In this project, I am attempting to divide the form into two sections: Person Name and Personal Details.
While I have successfully grouped fields for Person Name, I am facing issues with grouping fields for Personal Details.
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 functional Stckblitz: https://stackblitz.com/edit/angular-x4a5b6-5uj52y
Currently, everything seems to be functioning correctly. While I have successfully created a group for Person Name, I am facing difficulty in displaying the input boxes for Personal Details.
The requirement is to split a single form into two parts with titles above each section.
To achieve this structured display, where only the parent title is displayed at the top of each section (e.g., "Person Name (Has First and Last Name)", "Personal Details (Has Email and Mobile)"), I need assistance on how to implement this.
I aim to achieve the following order of display:
Person Name
-> First Name
-> Last Name
Personal Details
-> Email
-> Mobile Number
If my approach so far is incorrect, I kindly request guidance on splitting the dynamic form as shown in this example.
My goal is to achieve a form layout similar to this example, but incorporating pure Angular dynamic form creation and JSON data loading.
Please assist me in creating a group for Personal Details, akin to how the Person Name group has already been created and is functional.
I have been struggling with this issue for quite some time, your help would be greatly appreciated...