How to allow only integer numbers in Angular?

user_2419808 0
Viewed 32875

I have a number input in my HTML and I want it to be an integer, not a floating point number.

So, if I have this:

<input type="number" ng-model="person.age" />

Angular will consider a value of 18.4 to be valid. How can I fix this?

angularjs numbers validation integer input
5 Answers

I will share part of my code.
In my .ts file I have the following code:

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
...
export class IntegerComponent implements OnInit {
fgInteger: FormGroup;
...
constructor(private formBuilder: FormBuilder) { }

  ngOnInit(): void {
    this.fgInteger = this.formBuilder.group({
      amount: ['', [Validators.required, ..., Validators.pattern('^\\d+$')]]
    });
  }
}

The pattern into the .ts worked for me:

  • '^' This is the start of the pattern.
  • '\d' This means that the value is a digit (0-9).
  • '+' Means that this pattern should be used more than 1 time.
  • '$' This is the end of the pattern.

Also, into my .html file, I have the following code:

<form id="fgInteger" [formGroup]="fgInteger" novalidate #fform="ngForm" (ngSubmit)="onSubmit()">
     <mat-form-field appearance="outline">
          <mat-label>Amount:</mat-label>
          <input name="amount" formControlName="amount" type="number" min="1" step="1" matInput placeholder="Enter the amount.">
     </mat-form-field>
 </form>

By the way I'm working with Angular Material.

user_122636300

This worked for me.

<input type="number" step="1" min="0">
user_54751580

Here is another option that works great for me. It doesn't allow the user to enter non integer values, but intercepts the keyboard entries if invalid and prevents the character from being typed.

<input type="number" min="0" oninput="validity.valid||(value='');" maxlength="3" placeholder="Quantity"/>
user_8110580
Related