angular
angular copied to clipboard
angular
Binding on input [type] is broken
I'm submitting a ...
[x] bug report => search github for a similar issue or PR before submitting
Current behavior
Try to bind the type attribute of input:
// in Class
inputType="number"
// in html
<input [type]="inputType" formControlName="integerB" />
Initially, the value is presented as number when doing form.value:
{"integerB": 5}
Now, try to change the input's value.
Its type has changed to string:
{"integerB": "5"}
while it seems the html attributes haven't changed:
// chrome dev console
<input formcontrolname="integerB" ng-reflect-name="integerB" ng-reflect-type="number" type="number" class="ng-valid ng-dirty ng-touched">
Expected behavior If we are able to bind to [type], the input type should have stayed "number", so does the value.
Minimal reproduction of the problem with instructions http://plnkr.co/edit/kp0xoDbZmJnD5orOTZUj?p=preview
What is the motivation / use case for changing the behavior? I'm dynamiclly generating forms from given JSON, so binding to [type] can save a lot of copy-paste code.
Please tell us about your environment: Not sure this is relevant as it is reproducible in plnkr.
Thanks.
Edit: same goes if binding [type] to inputType="checkbox".
Edit2: this is also broken in the Dynamic Forms demo if you change "email" type to number (for example)
Looks like a dup indeed, although my issue is not restricted to ngModel only but also for ReactiveForms.
The Dynamic Forms demo still demonstrates this behaviour (the ability to bind to [type]) and is misleading.
<input formControlName="integerB" [type]="'number'"/>
<input formControlName="integerB" [attr.type]="'number'"/>
doesn't trigger creation of NumberValueAccessor https://plnkr.co/edit/u9RAULnbb4lGTR6JJhos?p=preview So it's blocked by https://github.com/angular/angular/issues/11716
Is this being fixed any time soon? It's a real gapping hole in a "big" feature of angular.
Check #21418 for a workaround I use.
Would be nice too if the docs say you don't support reactive forms completely and that it's state is actually incomplete...
Wonder why this still hasn't been fixed. It seems like a common use case and see many requests to have this support.
It's very surprising, I guess not many use reactive forms or were smart enough not to use an incomplete "feature"
Wow, I am also wondering why this still hasn't been fixed. This bug makes it really hard to create a dynamic form.
@gorkemyontem You have no idea, our dynamic form field component is huge so that we can cover each broken outlier.
@ceor there is a workaround referenced here #21418, still works in Angular 6
I have done several dynamic input fields, and I have learn that each type of input field is different, and even when you seem to only check for the input type, the fact that the browser renders a different element for each makes you appreciate this kind of behaviors.
The deprecation warning you get with ng-model makes the workaround really confusing.
@michael-letcher Could you please provide an example of code with WA?
I can find only this workaround, but it is working without of changing ngModel:
<label><input [type]="'checkbox'" [ngModel]="option" [checked]="option" (change)="option = $event.target.checked">Option</label>
Here is live example: https://stackblitz.com/edit/angular-checkbox-2way-binding
I've been searching for days for this. Are there any plans to fix this? Here's another example:
https://stackblitz.com/edit/angular-rzttpk?file=src/app/app.component.ts
Still an issue with Angular 9...
🔬 Minimal Reproduction
https://stackblitz.com/edit/angular-number-input-bug
No wonder... why the entire World is changing for React.
every framework/libarary has bugs
No wonder... why the entire World is changing for React.
@PedroFerr it's because they don't that react was built on angular 😉
Until this is fixed, you can set a [ngSwitch] on a parent element to the variable holding the input type, and use multiple input tags each with *ngSwitchCase. Not as clean, but it works.
<ng-container [ngSwitch]="inputTypeVariable">
<input *ngSwitchCase="'text'" type="text" ...>
<input *ngSwitchCase="'number'" type="number" ...>
...
</ng-container>
Until this is fixed, you can set a [ngSwitch] on a parent element to the variable holding the input type, and use multiple input tags each with *ngSwitchCase. Not as clean, but it works.
<ng-container [ngSwitch]="inputTypeVariable"> <input *ngSwitchCase="'text'" type="text" ...> <input *ngSwitchCase="'number'" type="number" ...> ... </ng-container>
It didn't work for me. I will have to make a duplicate that only differ by the input
It didn't work for me. I will have to make a duplicate that only differ by the input
It does work, you must be doing something else wrong. You have to put multiple input tags within the [ngSwitch] container, one for each possible case, explicitly declare the type in each tag, and repeat everything. Which is why it's just a sloppy workaround, if this type binding issue gets fixed you could accomplish it with just one input tag.
So to dynamically generate multiple form fields, you could have something like this in the component model:
private formFields: {
inputType: 'text' | 'number' | 'date'...
value: any
}[]
Then something like this in the template:
<ng-container *ngFor="let field of formFields"
<ng-container [ngSwitch]="field.inputType">
<input *ngSwitchCase="'text'" type="text" [value]="field.value"...>
<input *ngSwitchCase="'number'" type="number" [value]="field.value"...>
...
</ng-container>
</ng-container>
