How to use formControlName and deal with nested formGroup?

Question

As Angular documentation says we can use formControlName in our forms:

Hero Detail
FormControl in a Form         


        

Answer 1

tl;dr:

You can break your form up into components that use your nested formgroups, and formcontrolname can be used as normal.

The approach I tend to use, since usually nested Formgroups are used to designate separate parts of a form, is to break it up into components and pass those components the nested formgroup as an input parameter. So in your case, I would have an address component that takes a formgroup as a parameter:

And inside of that component, I would just have an @Input() formGroup that would be used in the html:

....

That way you can reference the control name explicitly as you normally would, since it would be part of this formgroup.

Also, keep in mind the form is passed as reference. your changes would be accounted for in the parent component's myForm element, and if you needed access to parts of the form not in you formgroup (validation, change detection, ect ect) you could always pass down the whole form and just define the formgroup to reference the inner group explicitly:

(assuming you pass down the entire form object that is

Happy coding!