Для проверки формы на стороне клиента предлагается AngularJS. Состояние формы и полей ввода отслеживается AngularJS, что помогает нам уведомлять пользователя о текущем состоянии, а также сохраняет информацию о том, были ли они изменены/модифицированы или нет. Итак, в этом уроке мы изучим проверку формы с помощью Angular Validator в Ionic framework.

Класс валидатора Angular содержит встроенный метод проверки.

Validator.required: Требуемый валидатор гарантирует, что значение введено в поле ввода.

Validator.minLength(number):Контроллер проверки minLength(num) требует, чтобы значение было больше числа.

Validator.maxLength(number):Контроллер проверки maxLength(num) требует, чтобы значение было меньше числа.

Validator.email: средство проверки электронной почты, выполняющее проверку электронной почты.

Validator.pattern('RegExp'): Контроллер валидатора pattern('RegExp') сопоставляет регулярное выражение с его значением.

Выполнение:

Чтобы использовать метод встроенного валидатора angular для проверки, нам потребовались еще два контроллера для реализации проверки формы, а именно FormControl и FormGroup, но этого недостаточно для проверки всех полей ввода, которые могут потребоваться для реализации наших собственных пользовательских валидаторов.

ФормКонтроль:

FormControl привязан к конкретному полю ввода со значением, которое вводит пользователь. Вы можете определить несколько валидаторов для одного formControl.

Привязал входное значение в Шаблон с помощью файла home.html директивы MyControl.

  • <ion-input type="text" formControlName="UserName"></ion-input>

Использование нескольких валидаторов одним файлом управления home.ts. Убедитесь, что здесь используется то же имя элемента управления формы, что и в файле home.html.

Подробнее читайте здесь›› Проверка формы с помощью Angular Validator в Ionic Framework