angular 5 how to generate dynamic key element in formBuilder.group object

Question

I am try to iterate list of input fields based on my initial http response object.

I am using reactive form in my application, so while iterating objects of form element in ui how to generate the dynamic key in my formBuilder.group object ? so that it will easy to handle all my form element data while submitting as like when we keep if its static data.

Please refer below noted stackblitz:

    // service response data
    this. formData=[
        {name: krish, email: test@gmail.com},
        {name:anand, email: teat2@gmail}
     ]

    // how to generate dynamic key in formbuilder group object ?
    this.homeDetails = this.formBuilder.group({
      krish:['', Validators.required],
      anand:['', Validators.required]
    });

above forBuilder group object how to iterate and set the key values of krish/anad dynamically? Is that any way to generate like for loop FormBuilder.group the object with key since it’s based on service response dynamic..?

Refer URL: https://stackblitz.com/edit/angular-router-example-dynamic-formcontrolname-rtmsqz?file=app%2Fhome%2Fhome.component.ts

Please include a [mcve] **in the question itself** not only on an external site. You can likely use [Stack Snippets](https://meta.stackoverflow.com/q/358992/215552) to do so. — Heretic Monkey, Feb 07 '19 at 14:34
I’m not shared only external site.. the question is this; how to create dynamic key of my form ? That is FormBuilder.group keys. Because that will be dynamic based on the http response I have to iterate the form in ui as well as build in my component file. — Krish, Feb 07 '19 at 14:51
Well, I guess I was assuming that your StackBlitz had a better sample of the data you're getting, and perhaps an initial attempt at solving the problem yourself (I can't access StackBlitz from work). If it doesn't, then my apologies for the faulty assumption. But you should include a sample of the data you're getting and an initial attempt a solving the problem yourself in the question. — Heretic Monkey, Feb 07 '19 at 14:55
Sounds like you're after something like what's described here: [How to use a variable for a key in a JavaScript object literal?](https://stackoverflow.com/q/2274242/215552) — Heretic Monkey, Feb 07 '19 at 23:34

Dharan · Answer 1 · 2019-02-11T07:12:22.483

Try this one. this will works

      *Declare formgroup variable* 

          homeDetails: FormGroup;

     // service response data
              this. formData=[
                    {name: krish, email: test@gmail.com},
                    {name:anand, email: teat2@gmail}
                 ]
         this.homeDetails = this.fb.group({});

            let formControlFields = [];
        for (let k = 0; k < this.formData.length; k++) {
                formControlFields.push({ name: this.formData[k].name, control: new FormControl('', Validators.required) });
              }

    formControlFields.forEach(f => this.homeDetails.addControl(f.name, f.control));

angular 5 how to generate dynamic key element in formBuilder.group object

1 Answers1