<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 setting the input type via a property the resulting value of a FormControl/FormGroup after input change is not correct</p>
<p dir="auto">e.g.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="inputType = 'number';
formControl = new FormControl(789);

&lt;input [type]=&quot;inputType&quot; [formControl]=&quot;formControl&quot;&gt; 
"><pre class="notranslate"><code class="notranslate">inputType = 'number';
formControl = new FormControl(789);

&lt;input [type]="inputType" [formControl]="formControl"&gt; 

</code></pre></div>
<p dir="auto">After updating the value in the input field the value of the formControl is a string and NOT a number.<br>
When setting via type="number" the value is correct (a number).</p>
<p dir="auto"><strong>Expected behavior</strong><br>
To get the value of the form control in the correct type</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<p dir="auto">In this plunker the wrong behaviour is shown:<br>
<a href="https://plnkr.co/edit/i9Spc10kUCIwtGYx8Vkn?p=preview" rel="nofollow">https://plnkr.co/edit/i9Spc10kUCIwtGYx8Vkn?p=preview</a></p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 4.1.1</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> all</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> 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>