Angular Material conflicting with ReactiveForms

0
votes

I have a login page that has 2 matInputs(username and password). I added the mat-error element to those to matInputs, so the mat-form-field displays an error message when entering invalid Username. Also, both inputs are part of a reactive form. So they both have the "formControlName" attribute. The problem is that when I unfocus from one of the input fields(with out typing username or password), the warn color from Angular material triggers as part of the reactive forms validator(username/password should not be empty). I provided images and I can provide code.

This is regular(Good): enter image description here

This when entering password(Good): enter image description here

This when Unfocues/Blur(Bad): enter image description here

And this when entering invalid inputs(good): enter image description here

I know that the reactive forms are triggering a validator when left empty(onUnfocus). I am trying to find a way to control that or control the Angular material warning color, so it does not trigger with the left empty validator.

1
sassangular-materialangular7angular-reactive-forms
The obvious answer is to not use the 'left empty' - or required - validator. Is there some reason you are trying to allow empty but also make the field required? Those two things are opposites. – G. Tranter
I dont want to allow empty field, but I want the program to check for that only when the login button clicks. Not when unfocusing – MSOUFAN

1 Answers

1
votes

There are different types of field validation and there is also form (submit/login) validation. At a practical level, you want form validation not field validation for not empty/required. By default, field validation (validators used in form controls or the 'required' attribute directive) is activated as soon as the field is 'touched'. So if you make a field 'required' an error will be shown as soon as the user applies and removes focus even without entering a value. Form validation however only takes place when the form is submitted.

You have two options - don't make those fields required and instead check them as part of your submit function and then set errors on the form controls if needed. You'll also need to take care of clearing those errors when the user enters a value or focuses the field.

Or, with reactive forms, you can implement a custom ErrorStateMatcher for those fields so that the 'required' validator will only throw an error if the form is submitted rather than when the field is touched. Turning off 'touched' validation this way is fairly common for this kind of thing - you can just modify the Angular Material example shown here: https://material.angular.io/components/input/overview#changing-when-error-messages-are-shown.