Угловой материал конфликтует с ReactiveForms

Question

У меня есть страница входа в систему, которая имеет 2 matInputs (имя пользователя и пароль).Я добавил элемент mat-error к ним в matInputs, чтобы поле mat-form отображало сообщение об ошибке при вводе неверного имени пользователя.Кроме того, оба входа являются частью реактивной формы.Таким образом, они оба имеют атрибут «formControlName».Проблема заключается в том, что когда я не фокусируюсь на одном из полей ввода (без ввода имени пользователя или пароля), цвет предупреждения из материала Angular запускается как часть средства проверки реактивных форм (имя пользователя / пароль не должно быть пустым).Я предоставил изображения и могу предоставить код.

Это регулярно (хорошо):

Это при вводе пароля (хорошо):

Это при отключении / размытие (плохо):

И при вводе недопустимых входов (хорошо):

Я знаю, что реактивные формы запускают валидатор, когда его оставляют пустым (onUnfocus).Я пытаюсь найти способ контролировать это или контролировать цвет предупреждения о угловом материале, чтобы он не срабатывал при оставленном пустом валидаторе.

Answer 1

Существуют различные типы проверки полей, а также проверка формы (отправить / войти).На практическом уровне вы хотите, чтобы проверка формы, а не проверка поля не была пустой / обязательной.По умолчанию проверка поля (валидаторы, используемые в элементах управления формой или директиве атрибута required) активируется, как только поле «касается».Таким образом, если вы сделаете поле «обязательным», будет отображена ошибка, как только пользователь применит и удалит фокус, даже не введя значение.Однако проверка формы происходит только при отправке формы.

У вас есть два варианта - не делать эти поля обязательными, а вместо этого проверять их как часть функции отправки, а затем при необходимости устанавливать ошибки в элементах управления формой.,Вам также необходимо позаботиться об очистке этих ошибок, когда пользователь вводит значение или фокусирует поле.

Или, с помощью реактивных форм, вы можете реализовать пользовательский ErrorStateMatcher для этих полей, чтобыrequired 'validator выдаст ошибку только в том случае, если форма отправлена, а не при касании поля.Отключение проверки «прикосновением» таким способом довольно распространено для такого рода вещей - вы можете просто изменить пример углового материала, показанный здесь: https://material.angular.io/components/input/overview#changing-when-error-messages-are-shown.

Answer 2

Попробуйте использовать регулярное выражение, чтобы передать пустую строку вместе с шаблоном.

pattern = /(^[a-zA-Z]+(\s*[a-zA-Z]+)*$)|(^$)/;

Вы можете увидеть его в действии здесь: http://jsfiddle.net/BAXya/