angular/components

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

Open

#8,513 建立於 2017年11月17日

在 GitHub 查看
 (20 留言) (9 反應) (0 負責人)TypeScript (6,650 fork)batch import
P4area: material/form-fielddocsfeaturehelp wanted

倉庫指標

Star
 (24,044 star)
PR 合併指標
 (平均合併 3天 12小時) (30 天內合併 98 個 PR)

描述

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.

貢獻者指南