angular: Dynamically created "input" with type checkbox does not work with ngModel

in creating a options list that allows the user to change different settings i found a problem with the type checkbox . take this component

(function(app){
app.testing=ng.core.Component({
selector:"testing",
template:"<input type='checkbox' [(ngModel)]='testing'/>"+
"<template ngFor #item [ngForOf]='list'>"+
"<input [type]='item.type' [(ngModel)]='item.value'/>"+
"</template>"
}).Class({
constructor:[function(){
this.testing=true;
this.list=[
{type:"checkbox",value:true},
{type:"text",value:"hello world"}
];
}],
});
})(window.app||(window.app={}));

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 here

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.

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 13
Comments: 27 (7 by maintainers)

Most upvoted comments

It is 2017 and Angular 4.4.4 and dynamic type for input fields does not work.

This works:

<input type="checkbox" formControlName="{{ name }}">

Those ones does not work:

<input type="{{ type }}" formControlName="{{ name }}">
or
<input attr.type="{{ type }}" formControlName="{{ name }}">
or
<input [type]="type" formControlName="{{ name }}">

Those 3 will create normal input field with type="checkbox" but binding will not work and form.value will not update when checkbox is clicked.

artuska on Feb 8, 2018

Angular 4.4.5

This not work : <input [type]="'number'" formControlName="age" /> form.value.age will become String, not Number.

This Work : <input type="number" formControlName="age" />

keatkeat87 on Oct 17, 2017

@funkizer See https://github.com/angular/angular/issues/15531#issuecomment-289555359 for browser and https://github.com/angular/angular/issues/15837#issuecomment-292700619 for Angular.

trotyl on Feb 8, 2018

I’m new to Angular2. I’ve been working on a creating a large form and creating dynamic input types was something that made a lot of sense for my usecase. While there are workarounds, I think this is something that could be run into a lot.

Here is a plunker that reproduces it in a simple way: https://plnkr.co/edit/O9tCGAbbwYWFYLpuRqKv?p=preview

EpicButterz on Nov 2, 2016

I guess official example does not work (works only with text/select type), because it uses the same approach: https://angular.io/docs/ts/latest/cookbook/dynamic-form.html

kemsky on Aug 9, 2016

Nobody said this issue has a low priority. There are just a lot of other issues with similar priority and there were a few huge tasks with higher priority. You could wrap it in a reusable component with a matching ControlValueAccessor. Prefer composition over inheritance. Creating and composing components is the way to go in Angular2.

zoechi on May 31, 2016

I don’t know why this issue has such a low priority: you can not create extendable and reusable code, you are literally forced to do ctrl+c/v. You also can not extend components in angular, so the only choice is copy &paste pattern. It is really disappointing.

Example:

<div><label [attr.for]="id">{{label}}</label></div>
<div>
    <input #input [attr.id]="id" [type]="type" [(ngModel)]="value" [attr.title]="tooltip" [readonly]="readonly" [class.datepicker]="type==='datetime'" />
</div>

Currently i’m forced to COPY this template for each type of input(!) and to COPY corresponding component implementation (no 100% working way to inherit / no way to reuse with different template). It is just copy & paste in action. perhaps i could do some hacks, some dynamic loading, but should it be done this way?

kemsky on May 31, 2016