Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[input] Add example of using mat-error with parent formgroup validation

See original GitHub issue

Bug, feature request, or proposal: <mat-error> doesn’t show when I use an email maching validator for emails inputs.

What is the expected behavior? To display the error.

What is the current behavior? No error is displayed

What are the steps to reproduce?

Set a custom validator for check if two emails inputs are equals, like this :

private matchEmail(AC: AbstractControl) {
    return AC.get('mail').value === AC.get('mailconfirm').value ? null : { mailmismatch: true };

this.administratifForm ={
        mail: this.fb.control('', [Validators.required,]),
        mailconfirm: this.fb.control('', [Validators.required]),
    }, {
    validator: this.matchEmail,

The template :

    <input matInput placeholder="Vérification d'email" formControlName="mailconfirm">
    <mat-error *ngIf="administratifForm.get('mailconfirm').hasError('required')">
        Ce champ est requis
    <mat-error *ngIf="administratifForm.hasError('mailmismatch')">
        Les adresses mail ne correspondent pas

Which versions of Angular, Material, OS, TypeScript, browsers are affected? Angular 5.0.2, Material 5.0.0-rc0, MacOS Sierra, Firefox

Additional Information If i replace the <mat-error> tag by a <p> tag (or anything else), it’s work.

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:9
  • Comments:18 (5 by maintainers)

github_iconTop GitHub Comments

kamokcommented, Jan 4, 2018

Ok, I’ve followed the stack post linked by @Jbz797, and here’s the TLDR version of that poorly written post.

  1. Add this class. You can add it to your current .ts, or import it from somewhere else. Doesn’t matter.
export class ParentErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
      const isSubmitted = !!(form && form.submitted);
      const controlTouched = !!(control && (control.dirty || control.touched));
      const controlInvalid = !!(control && control.invalid);
      const parentInvalid = !!(control && control.parent && control.parent.invalid && (control.parent.dirty || control.parent.touched));

      return isSubmitted || (controlTouched && (controlInvalid || parentInvalid));
  1. Then, add [errorStateMatcher]="parentErrorStateMatcher" to the template input that needs the particular error. Add it to whichever mat-form-field needs to render that parent error. Eg, for passwords group with a password control and password_verify control, add it to password_verify’s input. Here’s mine.
  <input matInput formControlName="password_verify" placeholder="Verify Password" type="password" required [errorStateMatcher]="parentErrorStateMatcher">
  <mat-error *ngIf="register_password_verify.invalid">{{ getRegisterPasswordVerifyError() }}</mat-error>
  <mat-error *ngIf="register_password_group.invalid && !register_password_verify.pristine">{{ getRegisterPasswordGroupError() }}</mat-error>
  1. Now, the mat-error that belongs to the GROUP will be rendered. In the example above, it’s the last mat-error.

Thanks for this thread!

nhducseuitcommented, Jul 26, 2018

ErrorStateMatcher doesn’t work with custom MatFormFieldControl

Read more comments on GitHub >

github_iconTop Results From Across the Web

Display custom validator error with mat-error - Stack Overflow
The single line of code in this method is quite simple; it returns true (error exists) if the parent control (our FormGroup) is...
Read more >
Validating Confirmation Fields in Angular Reactive Forms with ...
The single line of code in this method is quite simple; it returns true (error exists) if the parent control (our FormGroup) is...
Read more >
Angular: how to do forms - Medium
The examples will use Angular Material to create an InputFieldComponent. ... Add an errors input and some logic to get the error message:...
Read more >
Angular 10, reactive forms with dynamic rows, validation and ...
insert your form group declaration public exampleForm: FormGroup; ... example is used angular material components bud fell free to use it ...
Read more >
Angular Custom Form Controls - Complete Guide
formControlName ) as we use for standard input boxes. ... can participate in the parent form validation and value tracking mechanisms.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found