Ionic Input type number not work with dot

Ionic Framework ionic-v3
1

Dear all ,
I am newbie with ionic
now i got a problem when i try to use input type number ,
and i want to manage on dot just one dot , but number not store dot ,
it just store the value number, so i can’t manage it by value
.
anyone can help me?
thanks,

2 Likes
2

Use an <ion-input> and a Validators.pattern().

See:

3

thanks for reply , yes i did following ur link but it still not work , when i use pattern like “Validators.pattern(/^\d+.\d{2}$/)” but i still can input double dot . do you have any solution?

4

Change the ‘2’ to a ‘1’ -> Validators.pattern(/^\d+.\d{1}$/)

5

here is HTML Code

Number and here is Ts this.credentialsForm = this.formBuilder.group({ number: [ '', Validators.compose([ Validators.pattern('/^\d+.\d{1}$/'), Validators.required ]) ] });

please help me check it what wrong?

6 
const MY_REGEXP = /^\d+.\d{1}$/;

Validators.pattern(MY_REGEXP)

See:

7

image

i still can input many dot

8

Its a validator, if you want to restrict the keys that can be entered, try:

page.html:

<ion-input (keyup)="onKeyUp($event)" ... >

page.ts:

  const MY_REGEXP = /^\d+.\d{1}$/;

  public onKeyUp(event: any) {

    let newValue = event.target.value;
    let regExp = new RegExp(MY_REGEXP);

    if (!regExp.test(newValue)) {
      event.target.value = newValue.slice(0, -1);
    }
  }
9

Do you find use of keyup like that to be robust across platforms? I think it’s probably safer to let the form validator throw an error. But maybe that’s too paranoid.

10

I agree, that’s why I shared this link: https://robferguson.org/blog/2017/11/20/ionic-3-and-forms-part-2/

11

yes i want to restrict on keys but now i try it follow u , but when i put value it show nothing , note : i used type : “Number”

12

Try page.html:

<ion-input (keyup)="onKeyUp($event)" type="text" ... >
</ion-input>

And page.ts:


  const NUMBER_REGEXP = /^\s*(\-|\+)?(\d+|(\d*(\.\d*)))([eE][+-]?\d+)?\s*$/;

  ...

  public onKeyUp(event: any) {

    let newValue = event.target.value;
    let regExp = new RegExp(NUMBER_REGEXP);

    if (!regExp.test(newValue)) {
      event.target.value = newValue.slice(0, -1);
    }
  }

See: https://github.com/angular/angular.js/blob/ffb6b2fb56d9ffcb051284965dd538629ea9687a/src/ng/directive/input.js#L16

13

How about this regex:
Validators.pattern('[-+]?([0-9]*\.[0-9]+|[0-9]+)')

14

Thank Gizmo, i want to restrict on key , when i used type = “Number” so the key will be show just number and dot , but when i try to get target value from variable , it will not store dot , it just store number and also not return key code for me , so i don’t know how to restrict on dot , when user input .

15

This is a bad goal to have, in my opinion. There is no way to ensure it will work with all platforms. If you only need it on one platform, there is no need for Ionic. If you’re using Ionic, your goals should be on platform-independent behavior. Program for the browser, not for native functionality. The form validator is the way to go.

16

yes thanks you, @AaronSterling but i need to restrict the key this is user requirement, they don’t need to show expection while they miss input and edit it , they want us develop it like window base application that it will show nothing when they put wrong key and any exception!!!.

17

you could try text-mask https://github.com/text-mask/text-mask which allows you to restrict what is typed. You’ll need to use the type=“tel” for the proper keyboard.
The site specifically says it doesn’t work with Ionic but there is a version that does.