Форма и проверка являются основополагающими для веб-сайта. Angular предоставляет простой способ обработки проверки формы, но мы все же можем упростить работу с проверкой с помощью директивы.
В этом посте я покажу вам, как легко показать сообщение об ошибке проверки без * ngIf и длинного выражения.
Я предполагаю, что вы уже знакомы с Angular, я предлагаю вам прочитать эту тему, если вы их не знаете.
Проблема при проверке.
Отображение сообщения пользователю делает наш код некрасивым. Например
Перед добавлением сообщения проверки
После добавления сообщения проверки
Фууу. сейчас такой беспорядок. 😵
Итак, я пытаюсь избавиться от дублированного кода с помощью магии директив. Вот чего я добился.
Он действительно выглядит намного чище. 😻
Это достигается двумя директивами. invalidmessage и invalidType.
InvalidmessageDirective
Директива invalidmessage получает элемент управления формой по имени и устанавливает видимость размещенного элемента на основе ошибки элемента управления формы.
Вот код директивы invalidmessage.
Не волнуйтесь, я скоро объясню код.
Сначала я ввожу ControlContainer для получения экземпляра Formgroup из инжектора ближайшего родителя (в приведенном выше примере это myForm).
Теперь мы можем легко выйти из управления по имени (например, this.form.get('yourcontrolname')). 😎
Экземпляр FormControl может получать значение, ошибку и так далее. На самом деле в ReactiveForm вы используете просто элемент управления формой. Например, this.myform.get('name');
Я создаю setVisible() метод для установки видимости размещенного элемента, когда элемент управления действителен, и скрытого, когда это не так.
Отображение сообщения об ошибке вначале действительно плохо (об этом говорили многие веб-сайты Ux), поэтому это сделает пользователя менее раздражительным, если оно просто отображается, когда пользователь взаимодействует с элементом управления или уже нажимает кнопку отправки. Я проверяю это с помощью this.control.dirty и this.hasSubmitted выше.
setVisible() метод будет вызываться при изменении значения элемента управления и когда пользователь нажимает кнопку отправки.
Обратите внимание, Observable.of, он сработает немедленно, поэтому setVisible() будет вызываться вначале.
formSubmit$ - это Observable, которое генерируется при отправке формы. Будет установлено hasSubmitted на true.
invalidmessage предоставляет match метод для вызова директивы invalidType для проверки соответствия типу ошибки элемента управления.
this.control.errors - это объект, имя которого является типом ошибки. Скажем, требуется контроль формы, а проверка электронной почты и пользователь нарушают его. FormControl errors будет таким.
{
required:true,
email:true
}
Вы увидите, как это используется, в следующем разделе.
InvalidTypeDirective
Эта директива предназначена для установки видимого элемента хоста в зависимости от типа ошибки управления, который определяется в директиве invalidmessage.
Как вы могли заметить в приведенном выше примере, *invalidmessage. Есть префикс звездочки. Это называется Структурная директива. Короче говоря, директива Stuctural создаст ng-template окружающий элемент хоста, из-за которого элемент хоста не будет отображаться до тех пор, пока вы не сделаете явный рендеринг с помощью ViewContainerRef
Позвольте коду исследовать себя
В эту директиву добавлены 3 зависимости - InvalidmessageDirective, TemplateRef и ViewContainerRef.
TemplateRef и ViewContainerRef предназначены для создания и удаления хост-элемента (это сообщение об ошибке).
Угловой вводит экземпляр InvalidmessageDirective, который является ближайшим родительским инъектором.
<div invalidmessage="name">
<p *invalidType="'required'">Please provide name</p>
</div>
InvalidTypeDirective, который находится на <p>, может получить экземпляр invalidmessageDirective ( который находится на <div>), вставив InvalidmessageDirective в invalidTypeDirective, как мы делали выше.
Таким образом, директива invalidType может использовать свойство и метод экземпляра директивы invalidmessage .
Метод invalidmessage's match принимает тип ошибки по аргументу (который определяется свойством type) и проверяет, имеет ли объект ошибки указанный тип ошибки.
Если совпадение недопустимого сообщения вернет true, контейнер представления создаст представление из TemplateRef (это ng-template окружающий размещенный элемент), а контейнер представления очистится, если он имеет значение false. В терминологии непрофессионала директива invalidType показывает и удаляет элемент хоста на основе возвращаемого значения метода invalidmessage’s match.
Необходимо проверить, не создан ли контейнер представления, проверив свойство hasView, чтобы он не создавал повторно.
setVisible() вызывается, когда передается сообщение controlValue $ недействительного сообщения (изменение значения элемента управления и пользователь нажимает кнопку отправки).
Это все. Эти две директивы могут упростить нашу проверку формы. Возможно, он не идеален, но может дать вам представление.
Если у вас есть какие-либо вопросы или предложения, оставьте комментарий ниже.
Вот плункер
Если вам понравился этот пост, оставьте лайк ❤️ и подпишитесь на меня в Medium или Twitter, чтобы узнать больше об Angular, Javascript и многом другом.
Хакерский полдень - это то, с чего хакеры начинают свои дни. Мы часть семьи @AMI. Сейчас мы принимаем заявки и рады обсудить рекламные и спонсорские возможности.
Если вам понравился этот рассказ, мы рекомендуем прочитать наши Последние технические истории и Современные технические истории. До следующего раза не воспринимайте реалии мира как должное!
