Skip to content

mat-error does not display properly using custom cross validation #12796

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
worthy7 opened this issue Aug 23, 2018 · 7 comments
Closed

mat-error does not display properly using custom cross validation #12796

worthy7 opened this issue Aug 23, 2018 · 7 comments
Assignees

Comments

@worthy7
Copy link

worthy7 commented Aug 23, 2018

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Show form validation error text

What is the current behavior?

mat-error only shows if the Confirm Password field is kept empty.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-59b6pg

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

It's broken.

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

Material 6.4.6

Is there anything else we should know?

@worthy7 worthy7 changed the title mat-error does not display after the first time when using custom validators mat-error does not display properly using custom cross validation Aug 23, 2018
@sty1iss
Copy link

sty1iss commented Oct 10, 2018

In my case. 'min', 'max' are not work,

some answers said " using ErrorStateMatcher"
ErrorStateMatcher was not work after changed the value.

some answers said " mat-error displayed only with the 'required', 'minlength', 'maxlength' and 'pattern'"
but Validtors.email are work, so still mystery.

anyway I thought, mat-error does not work with custom validators,
I hope to this is an error, not an intended things

So I decide using the mat-hint and classes for display custom error until the fix this problem.

get customError(){
    return errors & !(errors['required'] || errors['minlength'] || errors['maxlength'] || errors['pattern'])
}

<mat-form-field  [class.mat-form-field-invalid]="customError">
<mat-hint *ngIf="customError">
    <span *ngIf="errors['customErrror']" class="mat-error">this is a custom error</span>
</mat-hint>
<mat-error *ngIf="!customError">
</mat-error>
</mat-form-field>

@manklu
Copy link

manklu commented Oct 10, 2018

@worthy7 Since you set the error on the group, both form fields are displayed with no error.

@worthy7
Copy link
Author

worthy7 commented Oct 11, 2018

@manklu I see what you mean but I just moved it and the same thing happens.
https://stackblitz.com/edit/angular-material2-issue-59b6pg

@worthy7
Copy link
Author

worthy7 commented Oct 11, 2018

@manklu Actually I'm not sure what you mean. Can you show me a version that works?

@manklu
Copy link

manklu commented Oct 11, 2018

@worthy7
Copy link
Author

worthy7 commented Oct 11, 2018

I don't fully understand but that works so it's not a bug

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants