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

Answer 1

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'"/>
<!-- ... -->

Answer 2

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));
  }