{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular/issues/13570","repository_url":"https://api.github.com/repos/angular/angular","labels_url":"https://api.github.com/repos/angular/angular/issues/13570/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/13570/comments","events_url":"https://api.github.com/repos/angular/angular/issues/13570/events","html_url":"https://github.com/angular/angular/issues/13570","id":196475232,"number":13570,"title":"Attempting to Bind Two Dependent Inputs Disabled State in Reactive Forms Results in Stack Overflow","user":{"login":"noamichael","id":6955807,"avatar_url":"https://avatars.githubusercontent.com/u/6955807?v=3","gravatar_id":"","url":"https://api.github.com/users/noamichael","html_url":"https://github.com/noamichael","followers_url":"https://api.github.com/users/noamichael/followers","following_url":"https://api.github.com/users/noamichael/following{/other_user}","gists_url":"https://api.github.com/users/noamichael/gists{/gist_id}","starred_url":"https://api.github.com/users/noamichael/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/noamichael/subscriptions","organizations_url":"https://api.github.com/users/noamichael/orgs","repos_url":"https://api.github.com/users/noamichael/repos","events_url":"https://api.github.com/users/noamichael/events{/privacy}","received_events_url":"https://api.github.com/users/noamichael/received_events","type":"User","site_admin":false},"labels":[{"id":393879365,"url":"https://api.github.com/repos/angular/angular/labels/comp:%20forms","name":"comp: forms","color":"c5def5","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2016-12-19T17:33:11Z","updated_at":"2016-12-22T13:11:12Z","closed_at":null,"body":"<!--\r\nIF YOU DON'T FILL OUT THE FOLLOWING INFORMATION WE MIGHT CLOSE YOUR ISSUE WITHOUT INVESTIGATING\r\n-->\r\n\r\n**I'm submitting a ...**  (check one with \"x\")\r\n```\r\n[x] bug report => search github for a similar issue or PR before submitting\r\n[ ] feature request\r\n[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question\r\n```\r\n\r\n\r\n**Current behavior**\r\n<!-- Describe how the bug manifests. -->\r\nAttempting to bind two dependent inputs disabled state in a reactive form results in a stack overflow.\r\n\r\n**Expected behavior**\r\n<!-- Describe what the behavior would be without the bug. -->\r\n(Given input A and B) \r\n\r\nInput A is disabled when B is present, and B is disabled when A is present.\r\n\r\n**Minimal reproduction of the problem with instructions**\r\n<!--\r\nIf the current behavior is a bug or you can illustrate your feature request better with an example, \r\nplease provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem via\r\nhttps://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).\r\n-->\r\nExample minimal plunkr:\r\nhttp://plnkr.co/edit/30TjtFLSf7BmvElYTByf?p=preview\r\n\r\n**What is the motivation / use case for changing the behavior?**\r\n<!-- Describe the motivation or the concrete use case -->\r\nWhen 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.\r\n\r\n**Please tell us about your environment:**\r\n<!-- Operating system, IDE, package manager, HTTP server, ... -->\r\n\r\n* **Angular version:** 2.0.X\r\n<!-- Check whether this is still an issue in the most recent Angular version -->\r\n\r\n* **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 ]\r\n<!-- All browsers where this could be reproduced -->\r\n \r\n* **Language:** [all | TypeScript X.X | ES6/7 | ES5]\r\n\r\n* **Node (for AoT issues):** `node --version` =   \r\n"},"comment":{"url":"https://api.github.com/repos/angular/angular/issues/comments/268796588","html_url":"https://github.com/angular/angular/issues/13570#issuecomment-268796588","issue_url":"https://api.github.com/repos/angular/angular/issues/13570","id":268796588,"user":{"login":"noamichael","id":6955807,"avatar_url":"https://avatars.githubusercontent.com/u/6955807?v=3","gravatar_id":"","url":"https://api.github.com/users/noamichael","html_url":"https://github.com/noamichael","followers_url":"https://api.github.com/users/noamichael/followers","following_url":"https://api.github.com/users/noamichael/following{/other_user}","gists_url":"https://api.github.com/users/noamichael/gists{/gist_id}","starred_url":"https://api.github.com/users/noamichael/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/noamichael/subscriptions","organizations_url":"https://api.github.com/users/noamichael/orgs","repos_url":"https://api.github.com/users/noamichael/repos","events_url":"https://api.github.com/users/noamichael/events{/privacy}","received_events_url":"https://api.github.com/users/noamichael/received_events","type":"User","site_admin":false},"created_at":"2016-12-22T13:11:12Z","updated_at":"2016-12-22T13:11:12Z","body":"@DzmitryShylovich That does work as expected! We can use this in our project for the time being, but we have dozens of inputs that need to work in this way, so that may result in a large component class.. I'll see if I can make some generic utility that allows you to make a simple mapping of the inputs who disable each other. \r\n\r\n"}}
{"actor":{"display_login":"noamichael"}}