Angular Material Input Number Only

By Arvind Rai, May 11, 2024
In this article, we will learn to create input element with type number that allows to enter only number.

Use Input type 'number'

To create input element to enter only number, HTML provides input type number as below.
<input matInput type="number"> 
Input type number has built-in validation to enter number only. We cannot submit non-numeric numbers and if we do, we get null. However we can limit max and min number to enter.
Find the code with <mat-form-field>.
<mat-form-field>
  <mat-label>Enter age</mat-label>
  <input matInput type="number">
</mat-form-field> 

Validate using 'min' and 'max'

Input type number can be limited using min and max attributes with <input> element.
<input matInput type="number" min="18" max="50"> 
Input type number provides buttons to increment and decrement numbers. By default, we can increment or decrement a number with no limit. But when we use min="18" and max="50", then using buttons we can decrement number up to 18 and increment number up to 50.
If we enter non-numeric character, after submit we will get null value.

With <mat-icon>

Find the code to use icon with input element within a <mat-form-field>.
<mat-form-field>
  ------
  <input matInput type="number">
  <mat-icon matPrefix>person</mat-icon>
</mat-form-field> 
Icon will display in the left of input element.

With FormControl

Create an object of FormControl in TS file. We can pass a default value.
age = new FormControl(20); 
Find the HTML code.
<mat-form-field> 
  ------
  <input matInput type="number" [formControl]="age">
</mat-form-field> 
The default value 20 will display in input element.

With FormGroup

Here I will create a form with input element of type number. On submit the form, I will fetch its value.
std.component.html
<form [formGroup]="stdForm" (ngSubmit)="onFormSubmit()">
  <p>
    <mat-form-field>
      <mat-label>Enter age</mat-label>
      <input matInput type="number" formControlName="age" [min]="minAge" [max]="maxAge">
      <mat-icon matPrefix>person</mat-icon>
      @if (stdForm.get('age')?.errors?.['required']) {
      <mat-error>Enter number only</mat-error>
      }
      @if (stdForm.get('age')?.errors?.['min']) {
      <mat-error>Minimum number is {{minAge}}</mat-error>
      }
      @if (stdForm.get('age')?.errors?.['max']) {
      <mat-error>Maximum number is {{maxAge}}</mat-error>
      }
    </mat-form-field>
  </p>
  <button mat-raised-button>Submit</button>
</form>

{{stdForm.get('age')?.value}} 
std.component.ts
import { Component } from '@angular/core';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';

@Component({
  selector: 'app-upload',
  standalone: true,
  imports: [MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule, ReactiveFormsModule],
  templateUrl: 'std.component.html'
})
export class FileUploadComponent {
  constructor(private formBuilder: FormBuilder) {
  }
  minAge = 18;
  maxAge = 50;
  stdForm = this.formBuilder.group({
    age: ['', [Validators.required, Validators.min(this.minAge), Validators.max(this.maxAge)]]
  });
  onFormSubmit() {
    console.log(this.stdForm.value);
  }
} 
Find the print-screen of the UI output.
Angular Material Input Number Only

Reference

POSTED BY
ARVIND RAI
ARVIND RAI
LEARN MORE












©2024 concretepage.com | Privacy Policy | Contact Us