<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></p>
<p dir="auto">I have a form with a submit button disabled if the form is not valid. This form contains a "username" input and a "password" one. When the page is loaded, these inputs are automatically filled in by Chrome but the button stays disabled (while all input contains valid data).</p>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto">The button should become enabled when the form is automatically completed by Chrome with valid data.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<ul dir="auto">
<li>Run <a href="http://plnkr.co/edit/9FrwjhbFaa0y5UMMGHHf" rel="nofollow">this plunkr</a></li>
<li>Select the option to open the plunkr in a separate window</li>
<li>If the form is not automatically filled in, fill it in, submit the form, close the window and run the plunkr in a separate window again</li>
<li>Normally, the form should be automatically filled in by the browser but the button will be grayed out</li>
</ul>
<p dir="auto">Note that, even though the button is grayed out, I can click on it to send the form but it's not obvious for the user.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>
<p dir="auto">A concrete use case would be to prevent a form to be sent if it's empty. However, the user should be able to send the form if this one is completed automatically by the browser.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<ul dir="auto">
<li>Windows 10</li>
<li>PHPStorm</li>
<li>npm</li>
<li>Webpack</li>
<li>Angular 2.0.2</li>
<li>Chrome 53</li>
<li>TypeScript 2.0.2</li>
<li>node 4.4.7</li>
</ul>
<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></p>

<p dir="auto">When you make a Component with an attribute with <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/input/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/input">@input</a>() named style, PhantomJS will produce a TypeError: Failed: Attempted to assign to readonly property.</p>
<p dir="auto">It works properly with any other navigator.</p>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">It shouldn't fail in PhantomJS</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

<p dir="auto">export class StyleComponent implements OnInit {<br>
<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/input/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/input">@input</a>() style: any;<br>
}<br>
in app.html: &lt;app-style [style]="whatever"&gt;</p>
<p dir="auto">I've detected this bug using primeng, wich uses [style] property to pass style to its components, and then I found in an issolated project this weird behaviour.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">With this bug, developers may not use an attribute named style (wich is a name very usual for an input attribute) if they want to test with PhantomJS their code.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<p dir="auto">Windows 7, ng-cli 1.0.0, npm 4.1.2, node 6.9.5</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 4.1.2</li>
</ul>

<ul dir="auto">
<li><strong>Browser:</strong> [ PhantomJS ]</li>
</ul>

<ul dir="auto">
<li>
<p dir="auto"><strong>Language:</strong> [ ES5]</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =   6.9.5</p>
</li>
</ul>