Angular 5 formgroup list controls or iterate them

Issue

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

Solution

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']

Answered By – Muhammed Albarmavi

Answer Checked By – Candace Johnson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.