Null parent form via FormGroupDirective from child form component

[acohenOT]

I'm submitting a...

[x ] Bug report  

Current behavior

This is based on the sub-form demo by @kara for reactive forms: https://youtu.be/CD_t3m2WMM8?t=2130

Using reactive form, a child custom form component is not able to access its parent form in order to add form controls to the parent. When injecting FormGroupDirective, the "form" property is null.

Expected behavior

When injecting FormGroupDirective and the component is part of a reactive form, the "form" property should give a reference to the parent's form.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/angular-53qnzx

Examine console:

PARENT FORM IS NULL
ERROR TypeError: Cannot read property 'addControl' of null

What is the motivation / use case for changing the behavior?

Adding child form to a parent form without requiring the parent form to create form controls for the child form elements.

Environment

Angular version: 6.0.1


Browser:
- [x ] Chrome (desktop) version 66.0.3359.170
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [x ] IE version 11
 

Others:

[kara]

FormGroupDirective.form is set through an input property, so it won't be set yet in the constructor of the nested form component. If you save the directive instead and call this.form.form in your hook, it should work as intended.

https://stackblitz.com/edit/angular-2b3zcz?file=src%2Fapp%2Faddress%2Faddress.component.ts

(The code in the slide was edited to this.form to fit slide width, but looks like it was misleading. Sorry about that.)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}