<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 building form inputs dynamically, if the <code class="notranslate">type</code> property for a <code class="notranslate">radio</code> button is a binding the radio inputs don't function correctly.</p>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">The <code class="notranslate">type</code> binding for an input element is dynamically set to to <code class="notranslate">radio</code> and the form still functions.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

<p dir="auto"><a href="http://plnkr.co/edit/6mU55f?p=preview" rel="nofollow">http://plnkr.co/edit/6mU55f?p=preview</a></p>
<p dir="auto">Open the plunker<br>
Note the first form with generated input fields and a <code class="notranslate">type='radio'</code> functions correctly<br>
Note the second form with generated input fields and a <code class="notranslate">type</code> binding doesn't function correctly</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">Simple form generation with reuse of an input element while providing different <code class="notranslate">type</code> values.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.X</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> [all | TypeScript X.X | ES6/7 | ES5]</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =</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>