Repository: angular
Issue: Calling enable()/disable() on nested reactive forms yields unexpected results
Labels: type: bug/fix,freq1: low,area: forms,state: confirmed,forms: disabling controls,P3

<!--
IF YOU DON'T FILL OUT THE FOLLOWING INFORMATION WE MIGHT CLOSE YOUR ISSUE WITHOUT INVESTIGATING
-->

**I'm submitting a ...**  (check one with "x")
```
[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
```
Consider a reactive form with nested subforms. Some controls in the form, upon changing value, should cause a corresponding subform to become revealed and enabled/disabled.  This can be achieved by subscribing to `valueChanges` on a source control, and then calling `enable()` or `disable()` on a target subform.  However, when there is more than one level of nested subforms, the overall status of the form is unexpected.

For example, take the following plunkr: [https://plnkr.co/edit/ozj0hidhA2rlgfepmlI5?p=preview](https://plnkr.co/edit/ozj0hidhA2rlgfepmlI5?p=preview)

This example demonstrates a form with the following structure:

- root form
    - existing customer form
        - username/password login form
        - card number/PIN form
    - new customer form

When the user toggles the radio buttons, the corresponding subforms become enabled/disabled as you would expect.  For instance, when the user confirms they are an existing customer, the "new customer form" is disabled.  Then, if the user chooses to log in with a username/password, the "card number/PIN form" is disabled. 

**Current behavior**
<!-- Describe how the bug manifests. -->

The problem arises after re-enabling a valid, nested form.  In the plunkr, perform the following steps:

1. Select "Yes" to "Are you an existing customer?"
2. Select "Credentials" for login type
3. Fill in username/password to satisfy the `required` validators.  The form is now `VALID`
4. Now return to the first radio group and select "No" to "Are you an existing customer?". This enables the "new customer form" and disables the "existing customer" form.
5. Now return again to the first radio group and select "Yes" to "Are you an existing customer?".  The form is now unexpectedly marked as `INVALID` because, for some reason, the "card number/PIN form" is immediately re-enabled (and therefore invalid, because it has required fields) after being properly disabled.


**Expected behavior**
<!-- Describe what the behavior would be without the bug. -->

In step 5 above, the form should be `VALID` and the "card number/PIN form" should be disabled.

**Minimal reproduction of the problem with instructions**
<!--
If the current behavior is a bug or you can illustrate your feature request better with an example, 
please provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem via
https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).
-->

See above for repro steps

**What is the motivation / use case for changing the behavior?**
<!-- Describe the motivation or the concrete use case -->

Nested forms with conditional validation are a very common use case, so implementing them should be easy and predictable.  If there is a better way to achieve this compared to the plunkr, please share.

**Please tell us about your environment:**
plunkr

* **Angular version:** 2.4.1
<!-- Check whether this is still an issue in the most recent Angular version -->

* **Browser:** Chrome 55
<!-- All browsers where this could be reproduced -->
 
* **Language:** [TypeScript 2.0.2]

* **Node (for AoT issues):** `node --version` =   n/a