Menu
I am using the value of a multi nested (Infinity level) reactive form which contains formArray, formGroups and formControls. Which is stored in DB.
Currently, I am patching the form using a recursion function that loops through the entire JSON and makes formArrays, formGroups and formControls based on keys and values.
Now the issue is, this method which I am using is not good as per performance perspective, so is there any better way to patch this kind of multi nested form in one go? (Just create form, no need to show in HTML)
This is simplified JSON for question reference -
Any section can have subSections and then subSections can have some kind of section
const formDataSections = [
{
index: 1,
sectionName: "",
subSections: [
{
index: 1,
subSectionName: "",
sections: [
{
index: null,
sectionName: "",
subSections: [
{
index: null,
subSectionName: "",
sections: [
{
index: null,
sectionName: "",
},
{
index: null,
sectionName: "",
subSections: [
{
index: null,
subSectionName: "",
sections: [
{
index: null,
sectionName: "",
},
{
index: null,
sectionName: "",
subSections: [],
},
],
},
],
},
],
},
],
},
{
index: null,
sectionName: "",
subSections: [
{
index: null,
contentTypes: [],
sections: [
{
index: null,
sectionName: "",
subSections: [],
},
],
},
],
},
],
},
],
},
];
572
There’re 2 ways to update the model value of Reactive forms. We can either call setValue on an individual control to update the value or call patchValue on a FormGroup to replace values in the form model. setValue strictly adheres to the structure of the form group, so we have to include everything as we did in the updateName method.
A nested, reactive form–in a single component. First idea is obviously to extract a component that represents a single item in the form array. Let’s call that an item form control and its corresponding component is an ItemFormControlComponent. To make that work, we pass its index and a FormGroup instance as input properties.
Today, we will take a look into nested reactive forms in Angular 4. Let’s go! One of the primary reasons why we are using Reactive form is due to the synchronous property of the form whereas the template-driven forms are not synchronous. Reactive forms are driven through the “Form Control” where the value will be in our control.
Nested Forms will allow us to create the array of objects for a single field and this hierarchy goes on. (i.e) A single object can have a number of objects inside of it, and we can achieve it in Reactive forms through the concept of “Form Array”.
You could create a custom "subform" component using ControlValueAccessor (docs) and call the component recursively (example)
I don't think you can avoid recursion since the list has potentially infinite length
Here's a (not fully working...) StackBlitz example, just to showcase what I'm talking about.
189
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
