Angular Material: How to validate min and max values on a number field?

user_2065796 0
Viewed 9778

I am working on a small project written in Angular 8 and Angular Material.

I have a number field where I want to specify min and max values, however I couldn't find any documentation on how to do that in the matInput documentation.

Question: Does matInput support min/max validations? What is the best way of validation number fields in Angular Material?

So far I tried the standard html5 min and max properties which unfortunately are not caught by the validation engine. I also tried some examples from the internet which turned to be not working in Angular 8.

angular8 angular-material angular typescript
4 Answers

In order to validate the content of a matInput you can wrap it in a mat-form-field like so:

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput [formControl]="numberFormControl">
    <mat-error *ngIf="numberFormControl.hasError('min')">
      The value is lower than the minimum
    </mat-error>
    <mat-error *ngIf="numberFormControl.hasError('max')">
      The value is greater than the maximum
    </mat-error>
  </mat-form-field>
</form>

And use form control for the validators:

import {Component} from '@angular/core';
import {FormControl, Validators} from '@angular/forms';

@Component({
  selector: 'input-errors-example',
  templateUrl: 'input-errors-example.html',
  styleUrls: ['input-errors-example.css'],
})
export class InputErrorsExample {
  numberFormControl = new FormControl('', [
     Validators.min(3),
     Validators.max(6),
  ]);
}

This works for minimum and maximum values, you can use the minlength and maxlength validators in the same fashion, the documentation is here:

https://angular.io/api/forms/Validators

user_64345900

I recommend you use Reactive Forms as it will make your business logic stay in the ts code, keeping your templates easier to read and maintain.

sampleForm = new FormGroup({}) // Instantiating our form

constructor(private fb: FormBuilder){ // Injecting the ReactiveForms FormBuilder.
 this.sampleForm = fb.group({
    // Adding the "age" input to our FormGroup along with its min-max Validators.
    'age': ['', [Validators.min(5), Validators.max(10)]] 
  })
}

And your html

<form [formGroup]="sampleForm ">
<label for="age">Age</label>
  <!-- formControlName will bind the age field declared in the ts code. -->
  <input type='number' id="age" formControlName="age">
</form>
user_54151530

You can use the reactive approach for creating forms. These might seem to be scary in the first time, but in the end it will be super helpful in setting up different validators.

Step 1: Import dependencies

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
   imports: [
   // other imports ...
   ReactiveFormsModule
   ],
})
export class AppModule { }

Step 2: Create a new FormObject

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-profile-editor',
  templateUrl: './profile-editor.component.html',
  styleUrls: ['./profile-editor.component.css']
})
export class ProfileEditorComponent {
  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
  });
}

Step 3: Create the template

<form [formGroup]="profileForm">

  <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>

  <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>

</form>

Step 4: Add validators

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-profile-editor',
  templateUrl: './profile-editor.component.html',
  styleUrls: ['./profile-editor.component.css']
})
export class ProfileEditorComponent {
  profileForm = new FormGroup({
    firstName: ['', Validators.required, Validators.min(3)],
    lastName: ['', Validators.required, Validators.min(3)]
  });
}
user_101140380

Try:

minlength and maxlength

But the type should not be a number, Like:

<input matInput placeholder="Test" minlength="3" maxlength="3">

Demo

user_71247610
Related