Dyanmically added controles to from array appear not to propagate changes

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Dynamically added from control to form array does not appear to capture changes unless a non dynamically added control is edited.

Expected behavior

Newly dynamically added controls should register changes and values should correctly populate form array controls.

Minimal reproduction of the problem with instructions

see stackoverflow post for examples and code Example code on GitHub

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

Building a dynamic data table which allows user inputs

Environment

Angular version: 5.2.0


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [x] Firefox version 57.0.4
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v6.12.2  
- Platform: Mac  

Others:

Issue reported on stackoverflow

[Toxicable]

(this.form.get("hobbies") as FormArray).controls.push(this.getRow()); should be replaced with (this.form.get("hobbies") as FormArray).push(this.getRow()); as in my minimal reproduction

[angular-automatic-lock-bot[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.}