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)

About this issue

Original URL
State: open
Created 8 years ago
Reactions: 79
Comments: 38 (2 by maintainers)

Links to this issue

Most upvoted comments

Giving this a bump because I think it’s still an important issue to fix.

+30

inorganik on Aug 30, 2021

No wonder… why the entire World is changing for React.

+19

PedroFerr on May 7, 2020

Wonder why this still hasn’t been fixed. It seems like a common use case and see many requests to have this support.

+16

AngularDevMrs on Apr 3, 2018

It’s 2022 already. Is this gonna be noticed anytime this year?

Anutrix on Jan 11, 2022

2024 hello

GBRBD on Jan 11, 2024

React ftw

Saul-BT on Apr 14, 2023

Hello 2023

H-dymitr on Apr 5, 2023

Not fixed?

Almostsagar on Jan 20, 2022

Still doesn’t work - 06.12.2022 6 years lmao

Asphiii on Dec 6, 2022

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>

DFG-kjtroll on Jul 14, 2022

Not fixed since 2016? Seriously?

haskelcurry on Nov 3, 2021

It’s very surprising, I guess not many use reactive forms or were smart enough not to use an incomplete “feature”

michael-letcher on Apr 3, 2018

@PedroFerr It is rather sad.

michael-letcher on May 7, 2020

This is what the workaround looks like in my code. It’s a bit verbose.

<input
  *ngIf="inputTypeVariable !== 'number'"
  [type]="inputTypeVariable"
  #inputRef
  class="input-field typography-body-input"
  [formControl]="formControl"
  [id]="controlName"
  [autocomplete]="autocomplete"
  [placeholder]="placeholder"
  [readonly]="readonly"
  [attr.aria-required]="required"
  [attr.aria-invalid]="formControl.invalid"
  [attr.aria-disabled]="formControl.disabled"
  (focus)="inputFocus($event)"
  (blur)="inputBlur($event)"
/>
<input
  *ngIf="inputTypeVariable === 'number'"
  type="number"
  #inputRef
  class="input-field typography-body-input"
  [formControl]="formControl"
  [id]="controlName"
  [autocomplete]="autocomplete"
  [placeholder]="placeholder"
  [readonly]="readonly"
  [attr.aria-required]="required"
  [attr.aria-invalid]="formControl.invalid"
  [attr.aria-disabled]="formControl.disabled"
  (focus)="inputFocus($event)"
  (blur)="inputBlur($event)"
/>

DavidLeonard77 on Nov 6, 2023

Amazing how this “enterprise” framework can’t get forms right, even after 17 versions (some of them with breaking changes, so there is no backward compatibility excuse).

In what sane world is

<input [type]="'number'">

different from

<input type="number">

yuriy-sng on Oct 23, 2023

April 2022, still no fix in sight?

Ghandie on Apr 25, 2022

This problem has been existed for four years

paul61843 on Jul 17, 2022

Still an issue with Angular 9…

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-number-input-bug

tremppu on Mar 30, 2020

@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

belyan on Feb 27, 2019