mat-error can not be displayed when i compare password and confirmPassword

[pierre03]

Bug, feature request, or proposal:

I tried to compare the value of two fields in the form, but it doesn't work with mat-error.
When i set a password, i want to display two error messages under the two input component or display at least the error message under the empty component.

Here is one of the input component, another one is coded with the same code.

HTML:

*****
<mat-error *ngIf="form.errors.mismatch">
mismatch error

TYPESCRIPT:

const form = new FormGroup({
password: new FormControl('', Validators.minLength(2)),
passwordConfirm: new FormControl('', Validators.minLength(2)),
}, passwordMatchValidator);

function passwordMatchValidator(g: FormGroup) {
return g.get('password').value === g.get('passwordConfirm').value
? null : {'mismatch': true};
}

What is the expected behavior?

I want to display the error after the input

What is the current behavior?

No error displayed

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

What is the use-case or motivation for changing an existing behavior?

I want to compare the password, and display the error message after each input component
It works when i use the <div *ngIf="hasError()"> to dislpay the error message, but not with mat-error.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular V5.0.3
Material: V5.0.0-rc.1

Is there anything else we should know?

[willshowell]

The ErrorStateMatcher might be helpful

https://material.angular.io/components/input/overview#changing-when-error-messages-are-shown

Related: #12796, #8513

[pierre03]

Hello,
Thank you for your reply, in fact, i have already added the ErrorStateMatcher="myMatcher" for these two fields, it works well to verify the "required" test (The field should not be empty when "dirty" or "touched"), then i need to compare the two fields' value.
I have also tried to create a function with the two fields' value as parameters, but it doesn't work when i change the password value, the function can not be trigged with the new value.

exemple works without mat-error on stackoverflow

Can you tell me how to do it with mat-error, please?

[willshowell]

Try this:

https://stackblitz.com/edit/angular-password-confirm-mat-error

[josephperrott]

Please keep GitHub issues for bug reports / feature requests. Better avenues for troubleshooting / questions are stack overflow, gitter, mailing list, etc.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}