CODEWITHSUNDEEP
angular-material2angular5
st_clair_clarke
st_clair_clarke

Reputation: 5705

How to trigger Material2 <mat-error> to be displayed on input-change

Given the example at https://material.angular.io/components/form-field/overview 

<div class="example-container">
  <mat-form-field>
    <input matInput placeholder="Enter your email" [formControl]="email" required>
    <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
  </mat-form-field>
</div>


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

/** @title Form field with error messages */
@Component({
  selector: 'form-field-error-example',
  templateUrl: 'form-field-error-example.html',
  styleUrls: ['form-field-error-example.css']
})
export class FormFieldErrorExample {
  email = new FormControl('', [Validators.required, Validators.email]);

  getErrorMessage() {
    return this.email.hasError('required') ? 'You must enter a value' :
        this.email.hasError('email') ? 'Not a valid email' :
            '';
  }
}

The error seems to be triggered on-blur. Only after leaving the input does the error appears. It is the same in my application. In this current mode, error exist but the is not displayed until the input loses focus.

How can I trigger the error to be displayed when the input change.

Upvotes: 6

Views: 17615

Answers (2)

Aupr
Aupr

Reputation: 755

and in your component class:

matcher = {
  isErrorState: () => {
    return this.statusField; // return Boolean status value
  }
};

Then just add in your matInput field

[errorStateMatcher]="matcher"

Upvotes: 2

AVJT82
AVJT82

Reputation: 73337

As per the docs you need to use an errorStateMatcher.

For you that would look like this:

export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    return !!(control && control.invalid && (control.dirty || control.touched));
  }
}

and in your component do:

matcher = new MyErrorStateMatcher();

Then just add in your input field

[errorStateMatcher]="matcher"

StackBlitz

Upvotes: 14

Related Questions