Angular Why does accessing nested formgroup through .controls throw error while using [controls] does not

Question

When trying to access a nested formgroup like following

this.parentForm = this.FormBuilder.group({
  name: [''],
  addressGroup: this.FormBuilder.group({
    street: [''],
    city: ['']
  });
});

When try to access street like this.parentForm.controls.addressGroup.controls.street - it throws error Property 'controls' does not exist on type 'AbstractControl', but it does not throw error when accessed like the following this.parentForm.controls.addressGroup['controls'].street

Can someone explain why and what is the reason, I have searched a lot and not able to find any proper reason

In javascript object[key] and object.key are supposed to produce the exact same output, so I can't really find any relation to Angular. Maybe it's a typescript issue? While debugging and examining the parentForm object, can you find your way to the desired controls property? Does it contain the data you expected? — fingeron
@fingeron I was able to access parentForm through this.parentForm.controls, I got no problem with that — Kowsalya

theykillimmortal theykillimmortal · Accepted Answer · 2017-12-28T12:13:02

FormGroup.controls return type is {[key: string]: AbstractControl}. this.parentForm.controls.addressGroup will return AbstractControl. This is why you got an error. As a workaround use get method: this.parentForm.get('addressGroup.street').

Angular Why does accessing nested formgroup through .controls throw error while using [controls] does not

1 Answers