Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

260
Views
How to patch a reactive form with multi nested json values

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: [],
                  },
                ],
              },
            ],
          },
        ],
      },
    ],
  },
];
over 4 years ago · Santiago Trujillo
1 answers
Answer question

0

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.

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!