Angular input [type]="'number'" always results in value being string

Question

Normally, I would declare the input type this way (Which works great):

<input [(ngModel)]="input1" type="number" placeholder="Working"/>

How ever, I want the type to be dynamic, therefore I use property binding [type]="objectType". To simplify the question, I used [type]="'number'".

<input [(ngModel)]="input2" [type]="'number'" placeholder="Not Working"/>

Now the problem is that when ever I make a change to input2, it is converted to a string. That's not the case with input1 - it remains the number which is the expected behavior. How can I use property binding for type and prevent it from converting to string?

StackBlitz

Junior Dussouillez · Accepted Answer · 2019-11-25 08:22:50Z

11

This is a known issue (see issue #13243).

A simple workaround for now is to use different inputs for each types :

@Input() public myInputType: string;

<input [(ngModel)]="value" type="number" *ngIf="myInputType === 'number'"/>
<input [(ngModel)]="value" type="text" *ngIf="myInputType === 'text'"/>
<!-- ... -->

answered Nov 25, 2019 at 8:22

Junior Dussouillez

2,4374 gold badges34 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Brian Burton Over a year ago

This won't work either because the value is being stored in the model as either a number or string.

Junior Dussouillez Over a year ago

It works if your value is declared as value: number | string;

Dino Over a year ago

Thanks, it's kinda odd the issue is still opened from 2016. This fixed the issue and will do it for now.

Brian Burton Over a year ago

No sorry I wasn't clear, if the input field is a text field, the value gets saved to your model as a string. If it's a number type it gets saved as a number. So if the user enters a value and then the type is switched dynamically, it will remain either a number or string in your model and you've just introduced another bug into your code. stackblitz.com/edit/angular-g2mryc

Dino Over a year ago

@BrianBurton Yes that's true. How ever the types I am getting are coming from an API and are locked afterwards. So there is no toggling with them.

Brian Burton · Accepted Answer · 2019-11-25 08:35:36Z

1

This is a known bug that I've run up against as well, but the only solution right now is to manually cast the input value.

  logValues() {
    // Manually cast it as an integer (or float if need be)
    if (this.input2Type == 'number')
      this.input2 = parseInt(this.input2.replace(/[^\d]/g, ''));

    console.log('input1 =>', this.input1);
    console.log('input1 type => ', typeof(this.input1));
    console.log('input2 =>', this.input2);
    console.log('input2 type => ', typeof(this.input2));
  }

answered Nov 25, 2019 at 8:35

Brian Burton

3,85020 silver badges34 bronze badges

Comments

Mridul · Accepted Answer · 2019-11-25 08:45:35Z

-3

If you want to dynamically change input type of a field you can try this. In your html

<input [type]="value">
<button (click)="onClick()">Change</button>

In your .ts file

value: string;
constructor(){
this.value = 'string';
}

onClick() {
  if (this.value == 'string') {
  this.value = 'number';
 }
else {
  this.value = 'string';
 }
}

answered Nov 25, 2019 at 8:45

Mridul

1,3661 gold badge8 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular input [type]="'number'" always results in value being string

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related