import { Component } from '@angular/core' ; import { FormControl , FormGroupDirective , NgForm , Validators } from '@angular/forms' ; import { ErrorStateMatcher } from '@angular/material/core' ; /** Error when invalid control is dirty, touched, or submitted. */ export class MyErrorStateMatcher implements ErrorStateMatcher { isErrorState ( control , form ) { const isSubmitted = form && form . submitted ; return ! ! ( control && control . invalid && ( control . dirty || control . touched || isSubmitted ) ) ; } } title @ Component ( { selector : 'input-error-state-matcher-example' , templateUrl : './input-error-state-matcher-example.html' , styleUrls : [ './input-error-state-matcher-example.css' ] , } ) export class InputErrorStateMatcherExample { emailFormControl = new FormControl ( '' , [ Validators . required , Validators . email , ] ) ; matcher = new MyErrorStateMatcher ( ) ; }