Проверка формы

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

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

Безопасность веб-приложений включает в себя защиту форм. Надежное веб-приложение должно проверять свои формы.

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

Проверка на основе шаблонов

Чтобы добавить проверку в форму на основе шаблона, вы добавляете те же атрибуты проверки, что и при проверке формы HTML. Angular использует директивы для сопоставления этих атрибутов с функциями валидатора в каркасе.

Каждый раз, когда значение элемента управления формы изменяется, Angular запускает проверку и генерирует либо список ошибок проверки, что приводит к статусу INVALID, либо значение NULL, что приводит к состоянию VALID.

Затем вы можете проверить состояние элемента управления, экспортировав ngModel в локальную переменную шаблона. В следующем примере NgModel экспортируется в переменную с именем name:

Пример:

HTML-код:

<input id="name" name="name" class="form-control"
      required minlength="4" appForbiddenName="bob"
      [(ngModel)]="hero.name" #name="ngModel" >
<div *ngIf="name.invalid && (name.dirty || name.touched)"
    class="alert alert-danger">
  <div *ngIf="name.errors.required">
    Name is required.
  </div>
  <div *ngIf="name.errors.minlength">
    Name must be at least 4 characters long.
  </div>
  <div *ngIf="name.errors.forbiddenName">
    Name cannot be Bob.
  </div>
</div>

Демонстрация в реальном времени:

См. Перо formvalidation_validateName.html от w3resource ( @ w3resource ) в CodePen .

Обратите внимание на следующее:

• Элемент <input> содержит атрибуты проверки HTML: required и minlength. Он также несет пользовательскую директиву validator, LTD. Для получения дополнительной информации см. Раздел «Пользовательские валидаторы».
• # name = "ngModel" экспортирует NgModel в локальную переменную с именем name. NgModel отражает многие свойства своего базового экземпляра FormControl, так что вы можете использовать это в шаблоне для проверки состояний управления, таких как действительный и грязный. Полный список свойств элемента управления см. В справочнике по AbstractControl API.
• Элемент * ngIf в элементе <div> показывает набор вложенных сообщений div, но только в том случае, если имя неверно и элемент управления либо загрязнен, либо затронут.
• Каждый вложенный <div> может представлять свое сообщение для одной из возможных ошибок проверки. Есть сообщения для требуемого, минимального и запрещенного имени.

Реактивная проверка формы

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

Функции валидатора

Существует два типа функций валидатора: валидаторы синхронизации и асинхронные валидаторы.

• Синхронизирующие валидаторы : функции, которые принимают экземпляр элемента управления и немедленно возвращают либо набор ошибок валидации, либо ноль. Вы можете передать их как второй аргумент при создании экземпляра FormControl.
• Асинхронные валидаторы : функции, которые берут экземпляр элемента управления и возвращают Promise или Observable, которые позже выдают набор ошибок валидации или ноль. Вы можете передать их в качестве третьего аргумента при создании экземпляра FormControl.

Примечание: по соображениям производительности Angular запускает только асинхронные валидаторы, если все валидаторы синхронизации проходят. Каждый должен завершить, прежде чем ошибки будут установлены.

Встроенные валидаторы

Angular имеет встроенные валидаторы, которые вы можете использовать для проверки формы. Атрибуты, такие как required и minlength, доступны для использования в качестве функций из класса Validators.

Чтобы форма героя стала реактивной, см. Ниже:

HTML-код:

<input id="name" class="form-control"
      formControlName="name" required >
<div *ngIf="name.invalid && (name.dirty || name.touched)"
    class="alert alert-danger">
  <div *ngIf="name.errors.required">
    Name is required.
  </div>
  <div *ngIf="name.errors.minlength">
    Name must be at least 4 characters long.
  </div>
  <div *ngIf="name.errors.forbiddenName">
    Name cannot be Bob.
  </div>
</div>

Демонстрация в реальном времени:

См. Pen реактивныйformvalidation.html от w3resource ( @ w3resource ) в CodePen .

Ключевые выносы:

• Форма больше не экспортирует никаких директив и вместо этого использует имя получателя, определенное в классе компонента.
• Обязательный атрибут все еще присутствует. Хотя это и не нужно для целей проверки, вы можете захотеть сохранить его в своем шаблоне по стилю CSS или по причинам доступности.

Предыдущая: Шаблон управляемых форм
Далее: Динамические формы