angular / angular/components

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

Open
#8,513 20 comments 9 reactions 0 assignees View on GitHub
area: material/form-field docs feature help wanted P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

**Bug, feature request, or proposal:**
`` 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 :
```



Ce champ est requis


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 `` tag by a `

` tag (or anything else), it's work.**

Contributor guide

Open the contributing guide

Research direction

The issue names no repository file, test, or documentation entry point; begin with the inline mat-error and parent FormGroup reproduction. Done means adding a clear example of the reported validation case and confirming that the expected error is displayed.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
documentation, frontend
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.