Calculating two numbers ending with the dot decimal separator

user_8962807 0
Viewed 78

I am somewhat familiar with Angular and just got into Ionic Framework.

I’m facing a problem. I’m attempting to calculate (sum) two numbers given in the separate input fields and displaying the result below. Calculation works as expected if I input the numbers like: 1 or 1.0 but inputting 1. (no number given after the dot) returns null for that input field.

In template I have code as follows:

<b>1st input</b> <ion-input type="number" (ionChange)="calculate()" [(ngModel)]="firstInput"></ion-input>
<b>2nd input</b> <ion-input type="number" (ionChange)="calculate()" [(ngModel)]="secondInput"></ion-input>
<b>Total:</b> {{ total }}

And in component:

firstInput = null;
secondInput = null;
total = null;
...
calculate() {
   this.total = this.firstInput + this.secondInput;
}

Why is null returned for 1. ? And is there a workaround to convert 1. into a number?

ionic-framework angular
3 Answers

If you use normal inputs without type="number" and convert the values with Number() in the calculate function, you will get the right result:

<b>1st input</b> <input  [(ngModel)]="firstInput" />
<b>2nd input</b> <input  [(ngModel)]="secondInput" />
<button (click)="calculate()"></button>
<b>Total:</b> {{ total }}

  firstInput = null;
  secondInput = null;
  total: number | null = null;

  calculate() {
    this.total = Number(this.firstInput) + Number(this.secondInput);
  }
user_148705870

Change the {total} you have to rather just saying {input1 + input 2} And just make sure they are of type number, otherwise just convert them to one

{Number(input1) + Number(input2)}

user_128158820

Thanks for your replies and sorry for the delay, couldn't post earlier.

However, I realized typing the field as a number field would take the freedom away I needed for the implementation. So I ended up to just use regular ion-input and not typing it as a number but giving it an inputmode of decimal, so mobile devices would display numeric pad when input is focused.

Template:

<b>1st input</b> <ion-input #firstInputRef (ionChange)="handleFirstInput(firstInputRef)" inputmode="decimal" [(ngModel)]="firstInput"></ion-input>
<b>2nd input</b> <ion-input #secondInputRef (ionChange)="handleSecondInput(secondInputRef)" inputmode="decimal" [(ngModel)]="secondInput"></ion-input>
<b>Total:</b> {{ total }}

Component:

@ViewChild('firstInputRef', {static: false, read: ElementRef}) firstInputRef: ElementRef;
@ViewChild('secondInputRef', {static: false, read: ElementRef}) secondInputRef: ElementRef;

readonly twoDotsRegex = /(\..*){2,}/;
...

handleFirstInput(input) {
      // Get the caret position
      const caretPosition = this.firstInputRef.nativeElement.querySelector('input').selectionStart;

      if (this.twoDotsRegex.test(input.value)) {
        // If second dot (.) is given, let's remove the added character
        input.value = input.value.substring(0, caretPosition - 1) + input.value.substring(caretPosition, input.value.length);
      }

      this.firstInput = input.value;
      this.calculate();
}

handleSecondInput(input) {
      // Get the caret position
      const caretPosition = this.secondInputRef.nativeElement.querySelector('input').selectionStart;

      if (this.twoDotsRegex.test(input.value)) {
        // If second dot (.) is given, let's remove the added character
        input.value = input.value.substring(0, caretPosition - 1) + input.value.substring(caretPosition, input.value.length);
      }

      this.secondInput = input.value;
      this.calculate();
}

...and calculate-method as is in the original post.

user_89628070
Related