<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[X] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[X] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
When  the form control of an input is changed (e.g. async pipe), the HTML element disabled property is not properly updated to the one on the new form control.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
The HTMLElement disabled property should be synchronised with the one of the corresponding FormControl associated.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
Here's a plunkr <a href="https://plnkr.co/edit/WL7DjZHHmzLR8o5NBO1R?p=preview" rel="nofollow">https://plnkr.co/edit/WL7DjZHHmzLR8o5NBO1R?p=preview</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
We use dynamic forms with a BehaviorSubject of the formGroup to use. When new forms are pushed, all the values work fine, but the disabled properties don't get updated properly.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Mac OS X 10.12.3</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.4.9<br>
Happens in 2.4.9. Will check in current 4RC now and update the issue.</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> [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 ]</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> TypeScript 2.0.2</p>
</li>
</ul>
<h2 dir="auto">I'm submitting a ...</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[X] Bug report"><pre class="notranslate"><code class="notranslate">[X] Bug report</code></pre></div>
<h2 dir="auto">Current behavior</h2>
<p dir="auto">When setting new <code class="notranslate">FormControl</code> instance to <code class="notranslate">[formControl]</code>/<code class="notranslate">formControlName</code> directive the <strong>disabled</strong> property/attribute of control DOM element <strong>does not update</strong> to the newest value.</p>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">When setting new <code class="notranslate">FormControl</code> instance to <code class="notranslate">[formControl]</code>/<code class="notranslate">formControlName</code> directive the <strong>disabled</strong> property/attribute of control DOM element <strong>should reflect</strong> the newest value.</p>
<h2 dir="auto">Minimal reproduction of the problem with instructions</h2>
<p dir="auto"><a href="http://plnkr.co/edit/g5yxZRs8PvJWPAIag7wj?p=preview" rel="nofollow">http://plnkr.co/edit/g5yxZRs8PvJWPAIag7wj?p=preview</a></p>
<h2 dir="auto">Please tell us about your environment</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Angular version: 4.2.4

Browser:
- [X] Chrome (desktop) version 58.0"><pre class="notranslate"><code class="notranslate">Angular version: 4.2.4

Browser:
- [X] Chrome (desktop) version 58.0
</code></pre></div>