Angular 5 Validators.pattern regex for only numbers

Question

I'm having trouble getting the Angular 5 Validators.pattern to work. I've tried every regex that SHOULD normally work, but it's not working. I read that Validators.pattern requires a different format, but I can't seem to find it...

Any ideas what the Validators.pattern should be to

(1) allow only numbers, positive and negative

and

(2) allow only numbers, positive and negative, optionally with up to 2 decimal places

Valid examples would be: 1 1.2 1.22 -21 -21.48

Anything with any letter in it would be invalid.

Thanks for your help!

Answer 1

After trying so many regex expressions, none was working in Safari. So here's what I did...

First, I used the regex when creating the form control:

new FormControl({value: field.value}, [Validators.required, Validators.pattern(/^-?(0|[1-9]\d*)?$/)])

Then, in the input itself I added an (input) event:

<input matInput (input)="validateInput(field)" [placeholder]="field.label" type="number" [formControlName]="field.id" [id]="field.id">

And that function looks like this:

validateInput(field) {

    this.detailForm.patchValue({ [field.id]: this.detailForm.controls[field.id].value }); }

}

If you enter an invalid character (e.g. a-z) in Safari, it doesn't store it in the field control's value. It only stores valid values (numbers) there. So I'm just patching the value with the stored value -- if it's valid, with numbers, it's fine; if it's invalid, with other characters, then it will replace the input with an empty string.

Works perfectly on all browsers. Hope this helps someone :)

Answer 2

Allow only integer numbers without symbols.

Validators.pattern(/^[0-9]\d*$/)

Numbers start from one

Validators.min(1)

Answer 3

Don't forget to use with quotes and double backslash in order to make your regex work like it's supposed Validators.pattern('\\-?\\d*\\.?\\d{1,2}') or you can make variable for that

const regexPattern = /\-?\d*\.?\d{1,2}/;
Validators.pattern(regexPattern);

Answer 4

This one work for me in Aungular 7

const numericNumberReg= '^-?[0-9]\\d*(\\.\\d{1,2})?$';

this.$form = this.$builder.group({
      cost: ['', [Validators.required,Validators.pattern(numericNumberReg)]],
    });

Answer 5

You can try with this regex '^-?[0-9]\d*(\.\d{1,2})?$'. And your form builder will be like below:

this.yourForm= this.formBuilder.group({
    amount: [this.amount, [Validators.required, Validators.pattern('^-?[0-9]\\d*(\\.\\d{1,2})?$')]]
});
 

Answer 6

I used the valueChanges property on my fromControl to filter out any non-numeric characters and update its own value, which seems to be a reliable (if over-engineered) solution and avoids having a separate input on the field. But full credit to @Matt for the principle.

This is compatible with the inbuilt Validators.min and Validators.max, but the field in your HTML must have type="text"rather than type="number", otherwise you get some odd behaviour.

myNumberField = new FormControl<number | null>(null);

myNumberFieldSub = this.myNumberField.valueChanges.subscribe(value => {
  let filteredValue = null;
  if (!!value) {
    filteredValue = parseInt(value.toString().replace(/[^0-9]*/, ''));
    if (isNaN(filteredValue)) {
      // Set field back to null if filtered value is not a number
      filteredValue = null;
    }
  }
  this.myNumberField.setValue(filteredValue, { emitEvent: false });
});

Don't forget to unsubscribe!!