angular 6 FormGroup/FormControl iterator issue

Question

I have a fromGroup and 7 FormControl inside (name, address, zipcode, etc) When the page is initialized, only the first FormControl is enabled, and the others are disabled. Only after the user enter his name, the others FormControls are supposed to be enabled. I would like to iterate over all the formcontrols and enable each one inside the loop, without having typing all the formcontrols. I would like to do something like that :

for (const field in this.form.controls) { 
   this.form.get(field).enable();
}

or like that :

Object.keys( this.form.controls).forEach(key => {
   this.form.controls[key].enable();
});

But unfortunately the other formcontrols are never enabled

Any idea why ?

thanks youss

Answer 1

You should exclude modifying name form control inside its own value changes subscription. Because this will make a recursive call and give the

maximum call stack size exceeded

error. And also you should not be enabling name control again, because it is already enabled.

this.form.get('name').valueChanges.subscribe(inserted => {
      if (inserted.length > 0) { 
        Object.keys(this.form.controls)
        .forEach(key => {
          if(key !== 'name')
          this.form.controls[key].enable()
        });
      }
 });