Attempting to Bind Two Dependent Inputs Disabled State in Reactive Forms Results in Stack Overflow

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

Current behavior

Attempting to bind two dependent inputs disabled state in a reactive form results in a stack overflow.

Expected behavior

(Given input A and B)

Input A is disabled when B is present, and B is disabled when A is present.

Minimal reproduction of the problem with instructions

Example minimal plunkr: http://plnkr.co/edit/30TjtFLSf7BmvElYTByf?p=preview

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

When constructing a form, it is very common to disable one input based on the presence of another. This is possible with template forms, but it is not possible with model forms. Issue #11271 suggests the only way to do this is by subscribing to the valueChanges property of a FormControl and manually calling FormControl#disable. However, this does not work because changes to input A’s disabled state will infinity trigger input B’s valueChanges subscribers and so on.

Please tell us about your environment:

• Angular version: 2.0.X

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

• Node (for AoT issues): node --version =

[noamichael]

@pmulac My case seems simple now compared to yours! Have you looked into AbstractControl#updateValueAndValidity? You may be able to use it to manually update your subforms validity and disabled state instead of relying on{ emitEvent: true }.

I also think this use case can be made generic, like mine, so that you can just pass a tree structure into a function which will manage creating all the subscribers for you.

I love Angular 2, but I think we need better documentation on complex form definitions.

[DzmitryShylovich]

FormControl.disable method accepts sevelar args see link so u can disable it without triggering subscriptions. Example http://plnkr.co/edit/df3mlu6HXtNHPGb3pHJv?p=preview