0

I have a TypeScript object to store values as follows.

export class MyObject {
 amount: number;
 constructor(amount: number) {
  this.amount = amount;
 }
}

My ionic form (HTML) looks like the following.

<ion-content padding>
 <ion-list>
  <ion-item>
   <ion-label stacked>amount</ion-label>
   <ion-input type="number" [(ngModel)]="myObject.amount"></ion-input>
  </ion-item>
  <ion-item>
   <button ion-button (click)="debug()">go</button>
  </ion-item>
 </ion-list>
</ion-content>

My page backing code looks like the following (without imports and decorators).

export class HomePage {
 myObject: MyObject;
 constructor(public navCtrl: NavController) {
  this.myObject = new MyObject(33.33);
 }
 debug() {
  console.log(this.myObject);
 }
}

When I modify the amount value and hit the "go" button and observe the JavaScript console, I notice that the myObject.amount field value is a string instead of a number.

{ "amount": "20" }

Instead, I should see the following.

{ "amount": 20 }

Any ideas on how to fix this problem?

Jane Wayne
  • 8,205
  • 17
  • 75
  • 120
  • This is disappointing; but continuing to search seems that this ticket is a duplicate of https://stackoverflow.com/questions/44288100/number-becomes-string-using-ngmodel-binding. I have to handle data conversion manually? If you all think this is a duplicate please let me know and I will close it. I am in hopes that an elegant data-binding type-safe approach has been worked into the frame since the issue has been issued. – Jane Wayne Oct 08 '18 at 22:15
  • I decided to workaround this by converting myself using this approach https://stackoverflow.com/questions/14667713/typescript-converting-a-string-to-a-number if anyone is interested. I'll close this ticket. – Jane Wayne Oct 08 '18 at 22:22
  • Possible duplicate of [number becomes string using NgModel binding](https://stackoverflow.com/questions/44288100/number-becomes-string-using-ngmodel-binding) – Jane Wayne Oct 08 '18 at 22:22

0 Answers0