When entering a dot character in a Form Input it's not available for Form Validation


I am trying to do a simple Regex validation for input fields in my Ionic 2 app. I am doing a pattern validation for a FormControl using the pattern ^\\d+$. So basically I want only whole numbers without any decimal points. Please see the plnkr I’ve created. If you enter 10.1 it will say that it’s incorrect but it won’t be marked as incorrect for 10. (10 followed with a dot)

However I’ve realised that the pattern validation is still marked as valid when I enter 10. or 10… (with an extra dot) whereas it shouldn’t be. To figure out what the problem is I created my own custom validator which simply checks

export class RegexValidator {

  static valid(regExp: string) {
    return (control: FormControl) => {
      let expression = new RegExp(regExp);
      if (expression.test(control.value)) {
          return null;
      } else {
        return { valid: false };

What I realised by using my custom validator is that when you enter 10.* to the input control, the validator receives ONLY the `10 without the following dot character. Is this a bug ? Any help would be appreciated. Thanks!

I suspect this is related to declaring the type of the input element as “number”. Does anything change if you don’t do that?

1 Like

Yes it does! I removed the input type and now it works perfectly. Thanks!

Is this a Ionic or Angular issue ?