Angular 5 formgroup list controls or iterate them

thebeancounter picture thebeancounter · Jul 30, 2018 · Viewed 8.9k times · Source

I am using angular 5 with formgorup and wish to iterate the controls, in order to create a dynamic component based on a form, the forms fields are given by an external data service (database etc.)

It is declares as follows

check = new FormGroup({
    firstName : new FormControl(true),
    lastName : new FormControl(false)
  });

I found this explaining how to iterate the controls but It does not work. I try to use:

for(let item of this.check.controls){}

and get this is the chrome debug:

Cannot read property 'length' of undefined

I can't access this.check.controls.keys or keys()

How can I iterate the keys?

Thanks

Answer

malbarmavi picture malbarmavi · Jul 30, 2018

try use Object.keys method to get object keys

Object.keys(this.check.controls); // => ["firstName", "lastName"]

this.check.controls is object key/value paire structure if you want to get the keys of the object {key1:value,key2:value} you can use Object.keys method that return an array contains keys ['key1','key2']