<p dir="auto"><strong>I'm submitting a bug</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>
Binding to an input's type causes number value accessor in forms to not work as expected.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
Same as when not binding to the input's type.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<ol dir="auto">
<li>Run <a href="http://plnkr.co/edit/xGC5O6G86qunGbxBwTRH" rel="nofollow">Plunker</a></li>
<li>Enter number in left input, note "Type of age" is number.</li>
<li>Modify number in right input, note "Type of age" is now a string.</li>
</ol>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
I would be more convenient to not have to parse the string. In a simple form, parsing the string into a number is not a problem. The problem arises when you have more complex forms that are being generated at run-time. Ideally, once a form is valid, I want to be able to just access it's value, JSON stringify it, and POST it to some API without having to muck about with it.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
I don't think it matters for this issue.</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.X<br>
Version 4.0.1</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 ]<br>
Chrome 57.0.2987.133</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
TypeScript 2.2</p>
</li>
</ul>
<p dir="auto">in creating a options list that allows the user to change different settings i found a problem with the type checkbox . take this component</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="(function(app){
app.testing=ng.core.Component({
selector:&quot;testing&quot;,
template:&quot;&lt;input type='checkbox' [(ngModel)]='testing'/&gt;&quot;+
&quot;&lt;template ngFor #item [ngForOf]='list'&gt;&quot;+
&quot;&lt;input [type]='item.type' [(ngModel)]='item.value'/&gt;&quot;+
&quot;&lt;/template&gt;&quot;
}).Class({
constructor:[function(){
this.testing=true;
this.list=[
{type:&quot;checkbox&quot;,value:true},
{type:&quot;text&quot;,value:&quot;hello world&quot;}
];
}],
});
})(window.app||(window.app={}));"><pre class="notranslate"><span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">app</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
<span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-c1">testing</span><span class="pl-c1">=</span><span class="pl-s1">ng</span><span class="pl-kos">.</span><span class="pl-c1">core</span><span class="pl-kos">.</span><span class="pl-en">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
<span class="pl-c1">selector</span>:<span class="pl-s">"testing"</span><span class="pl-kos">,</span>
<span class="pl-c1">template</span>:<span class="pl-s">"&lt;input type='checkbox' [(ngModel)]='testing'/&gt;"</span><span class="pl-c1">+</span>
<span class="pl-s">"&lt;template ngFor #item [ngForOf]='list'&gt;"</span><span class="pl-c1">+</span>
<span class="pl-s">"&lt;input [type]='item.type' [(ngModel)]='item.value'/&gt;"</span><span class="pl-c1">+</span>
<span class="pl-s">"&lt;/template&gt;"</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">Class</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
<span class="pl-c1">constructor</span>:<span class="pl-kos">[</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
<span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">testing</span><span class="pl-c1">=</span><span class="pl-c1">true</span><span class="pl-kos">;</span>
<span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">list</span><span class="pl-c1">=</span><span class="pl-kos">[</span>
<span class="pl-kos">{</span><span class="pl-c1">type</span>:<span class="pl-s">"checkbox"</span><span class="pl-kos">,</span><span class="pl-c1">value</span>:<span class="pl-c1">true</span><span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-kos">{</span><span class="pl-c1">type</span>:<span class="pl-s">"text"</span><span class="pl-kos">,</span><span class="pl-c1">value</span>:<span class="pl-s">"hello world"</span><span class="pl-kos">}</span>
<span class="pl-kos">]</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">app</span><span class="pl-c1">||</span><span class="pl-kos">(</span><span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">app</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">because of the ngFor loop combining with the dynamic setting of inputs and their types ngModel does not work on the second checkbox although it does on the first which is not dynamically set. im guessing this is a problem with how ngModel determines that the input is type checkbox. a example of this can be found <a href="https://jsfiddle.net/Lakntoyv/4/" rel="nofollow">here</a></p>
<p dir="auto">sorry to those of you who work in typescript i was not able to use typescript so it is in plain es5. i hope you can still interpret what its meaning and maybe someone can translate it to typescript.</p>