I am developing a form builder using Angular dynamic form functionality. The form data is loaded from a JSON object, as shown below:
jsonData: any = [
{
"elementType": "textbox",
"class": "col-12 col-md-4 col-sm-12",
"key": "first_name",
"label": "First Name (Part 1 includes first name and last name with title name of Person Name)",
"type": "text",
"value": "",
"required": true,
"minlength": 3,
"maxlength": 20,
"order": 1
},
// Additional JSON elements go here...
];
The current implementation successfully generates the complete form. However, I aim to divide the form into distinct sections such as Person Name, Personal details, Family Details, each with a varying number of input boxes.
A live example can be found at this link.
In the provided example, you will notice that the JSON structure does not support inserting titles within the form. My goal is to split the form into different sections and add titles for each part.
Is there a way to achieve this ordering and separation of the form, similar to the following layout?
Person Name
-> First Name
-> Last Name
Personal Details
-> Email
-> Mobile Number
-> Age
Family Details
-> Father Name
-> Mother Name
Please review the provided demo, showcasing the JSON file structure, and help me implement the form separation as described above.