angular/components

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

Open

#8513 opened on Nov 17, 2017

View on GitHub
 (20 comments) (9 reactions) (0 assignees)TypeScript (24,044 stars) (6,650 forks)batch import
P4area: material/form-fielddocsfeaturehelp wanted

Description

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 = this.fb.group({
        (...),
        mail: this.fb.control('', [Validators.required, Validators.email]),
        mailconfirm: this.fb.control('', [Validators.required]),
        (...),
    }, {
    validator: this.matchEmail,
    },
);

The template :

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

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.

Contributor guide

Tech stack
angulartypescripthtmlcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Angular basicsReactive Forms
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
The issue is a bug report where mat error does not display errors from a parent form group validator. The user provides a custom validator (matchEmail) that sets an error on the form group, but the mat error does not show. The expected behavior is that the error should be displayed. To resolve, investigate how mat error detects errors: it likely looks for errors on the same control it is attached to. Since the error is on the parent form group, mat error may not automatically show it. Look at the Angular Material source code for mat error (e.g., mat error.ts) to see how it checks for errors. Check comments for any workarounds or discussions. The fix could be to update documentation or change the error detection logic to include parent errors.