Angular 2 way number binding converting to string from input

Question

Any time I enter a number into an input that is 2 way bound to my object the value is converted to a string.
How can I force it or convert it to be a number?

It seems like it should be very simple and yet I have struggled to find an elegant solution.

I saw this solution of using a function to convert it but I don't see how that would work for 2 way data binding.
convert string to number angular 2 one way binding

          <div class="row"> 
            <mat-form-field class="custom-control">
              <input type="number" matInput class="custom-control" [(ngModel)]="mpv.baseFare" required placeholder="Base Fare">
            </mat-form-field>
          </div>
          <div class="row"> 
            <mat-form-field class="custom-control">
              <input type="number" matInput class="custom-control" [(ngModel)]="mpv.mileageRate" required placeholder="Mileage Rate">
            </mat-form-field>
          </div>

mpv is an object of class VehicleType I have my VehicleType class set up as follows. The number types are completely ignored, I guess because it is at run time so just non typed javascript.

 export class VehicleType {
    baseFare: number;
    mileageRate: number;
}

UPDATE - CURRENT HACKY SOLUTION:

onSave(vehicleType: VehicleType) {
// Hack to convert string to number
vehicleType.bags = +vehicleType.bags;
vehicleType.baseFare = +vehicleType.baseFare;
vehicleType.mileageRate = +vehicleType.mileageRate;
vehicleType.passengers = +vehicleType.passengers;
this.vehicleTypeService.updateVehicleType(vehicleType.id, vehicleType).subscribe(result => {

It seems to work out of the box in this example: stackblitz.com/edit/angular-hkjr6v ? — Zze
– Zze, Commented Oct 16, 2019 at 23:13
It is definitely being converted to a string. I checked the type and it ends up in my firestore database as a string. — MadMac
– MadMac, Commented Oct 17, 2019 at 0:54
@Zze It appears to work with a normal input but fails with a angular material one as per my example. — MadMac
– MadMac, Commented Oct 17, 2019 at 1:03

MadMac · Accepted Answer · 2019-10-17 01:11:13Z

0

It turns out that the order of the attributes on a matInput mater. This issue does not occur on a standard input only a matInput.

Does not work:

 <input type="number" matInput class="custom-control" [(ngModel)]="mpv.baseFare" required placeholder="Base Fare">

Works:

 <input matInput type="number" class="custom-control" [(ngModel)]="mpv.baseFare" required placeholder="Base Fare">

answered Oct 17, 2019 at 1:11

MadMac

5,0038 gold badges48 silver badges87 bronze badges

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

Comments

AlmaniaM · Accepted Answer · 2019-10-17 01:15:22Z

0

If you want to be able to modify the value when ngModel sets a new value then you're most likely looking at creating a get and set function. Example,

<div class="row"> 
  <mat-form-field class="custom-control">
    <input type="number" matInput class="custom-control" [(ngModel)]="baseFare" required placeholder="Base Fare">
  </mat-form-field>
</div>
<div class="row"> 
  <mat-form-field class="custom-control">
    <input type="number" matInput class="custom-control" [(ngModel)]="mileageRate" required placeholder="Mileage Rate">
  </mat-form-field>
</div>

get baseFare(): number {
  return mpv.baseFare;
}
set baseFare(value: any) {
  mpv.baseFare = pareseInt(value, 10);
}
get mileageRate(): number {
  return mpv.mileageRate;
}
set mileageRate(value: any) {
  mpv.mileageRate = pareseInt(value, 10);
}

That should do the job.

Update: you could just have value as any or both as any since you know the return type will be a number.

edited Oct 17, 2019 at 1:15

answered Oct 16, 2019 at 23:03

AlmaniaM

2152 silver badges5 bronze badges

2 Comments

MadMac Over a year ago

Error: 'get' and 'set' accessor must have the same type.

MadMac Over a year ago

I found the answer. No need to change the class. See below. Thanks though.

Collectives™ on Stack Overflow

Angular 2 way number binding converting to string from input

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related