angular/forms integer validator

Question

How can I validate my numeric input field to only accept integer and not any kind of decimal numbers (comma / dot)?

Code

Component

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

this.savingData = this.formBuilder.group({
  amount: ['', Validators.required], // only accept integer 123000
});

HTML

<ion-input type="number" min="1" inputmode="numeric" formControlName="amount" placeholder="{{ 'SAVINGS.amount' | translate }}" ></ion-input>

Any idea?

Kamran Khatti · Accepted Answer · 2020-09-18T10:02:10.270

1

You can try Angular Reactive form pattern validator

this.savingData = this.formBuilder.group({
  amount: ['', [Validators.required, Validators.pattern("^[0-9]*$")]], // only numbers
});

edited Sep 18 '20 at 10:02

answered Sep 18 '20 at 09:51

Kamran Khatti

2,402
14
22

@mafortis add regex inside quotes updated answer checkout now – Kamran Khatti Sep 18 '20 at 09:56
ok works this way `amount: ['', [Validators.required, Validators.pattern("^[0-9]*$")]],` thanks a lot – mafortis Sep 18 '20 at 10:00
@mafortis It will accept other chars as well but the form would be invalid though. – Kamran Khatti Sep 18 '20 at 10:00

score 0 · Answer 2 · answered Sep 18 '20 at 09:49

0

Try to use pattern like \d+. It is in Validators.pattern()

answered Sep 18 '20 at 09:49

Oleg Postoev

114
4

You mean I replace `Validators.required` with `Validators.pattern()`? – mafortis Sep 18 '20 at 09:50
You can do this, or save required and use `\d*` – Oleg Postoev Sep 18 '20 at 10:31

score -1 · Answer 3 · answered Sep 18 '20 at 10:09

Validators.pattern('^[^ ][0-9 ]+[^ ]$'), allows numeric values only. Also validates a field with not allowing spaces in the beginning or ending.

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

this.savingData = this.formBuilder.group({
  amount: ['', [Validators.required, Validators.pattern('^[^ ][0-9 ]+[^ ]$')]]
});

angular/forms integer validator

Code

3 Answers3