Рубрики
Без рубрики

Угловые валидаторы с условной проверкой в реактивных формах

Угловые валидаторы с условной проверкой в реактивных формах

Автор оригинала: Jimoh Hadi.

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

Ниже принципиально то, что вы узнаете в конце этого учебника:

  • Как создать основные угловые формы
  • Как использовать угловые валидаторы с угловыми реактивными формами
  • Как реализовать условные валидации на основе определенных значений в форме.

Без дальнейшего ADO давайте начнем!

Создание нового углового приложения

Чтобы начать, мы должны создать новое угловое приложение, используя мощные угловые CLI – убедитесь, что у вас есть его настроен.

Чтобы создать новый проект, просто введите следующую команду

ng new angular-reactive-validation

И это так! Angular-CLI автоматически загрузит проект в папке с именем Угловая реактивная проверка Отказ

Создание угловой реактивной формы

Мы будем использовать существующие app.component.ts файл для нашей логики компонентов; Не стесняйтесь использовать где угодно, который вы считаете в форме в вашем приложении.

Создание формы группы

Существуют разные способы создания реактивной формы. Мой предпочтительный подход использует Форменная группа рядом с FormBuilder Отказ Идея все еще такая же, даже если вы решите использовать FormControl Или любой другой подход – много способов на рынке вы знаете.

Во-первых, сначала, давайте импортируем FormBuilder , Форменная группа , Валидаторы Будут использовать в ближайшее время, а затем создать два поля для работы с нашей формой:

...
import {FormGroup, FormBuilder, Validators} from '@angular/forms';

form: FormGroup;
formSubmitted = false;
  • Форма переменная будет держать форму, которую мы скоро создаем
  • Formberubmated Удерживает состояние нашей формы: было ли это представлено или нет, по умолчанию для false.

Следующий! Мы вводим Formbuilder в конструкторе класса.

constructor(private formBuilder: FormBuilder) {}

Давайте построим нашу форму внутри метода, названного Buildform :

buildForm() {
    this.form = this.formBuilder.group({
      email: [null],
      username: [null],
      userCategory: ['employee'],
      institution: [null],
      company: [null],
      salary: [null],
    });
  }

Это все, что нам нужно добавить к нашему app.component.ts файл на данный момент, но давайте кратко объясним, что мы сделали: Мы использовали FormBuilder вводится в конструктор, чтобы создать форму и присвоено значение Это .Form поле, которое мы объявили в классе раньше.

Отправить

Когда наша форма отправлена, мы создаем OnsUbmit Метод для обработки его:

onSubmit(event) {
    event.preventDefault();
    this.formSubmitted = true;

    if (this.form.valid) {
      console.log(this.form.value); // Process your form
    }
  }

Здесь нет ничего особенного. Когда форма отправляется, мы устанавливаем Это. Оформированное поле для правда; Затем мы проверяем, действителен ли форма, прежде чем входить в систему в консоли – на самом деле, вы обработаете форму и отправьте ее на сервер.

Шаблон компонента

Откройте app.component.html и добавьте следующий код:

User Details


Employee Student

Мы добавили Форменная группа Директива к тегу форме, а также FormControlName каждому входу формы. Мы также привязаны нашими OnsUbmit Метод к форме ngsubmit мероприятие. Это все, что нужно, чтобы начать реализацию проверки реактивной формы.

Давайте вернемся к нашему классу компонентов!

Добавление проверки

Мы будем использовать угловые встроенные валидаторы для проверки формы – тот, который мы импортировали ранее:

buildForm() {
    this.form = this.formBuilder.group({
      email: [null, [Validators.required, Validators.email]],
      username: [null, [Validators.required]],
      userCategory: ['employee'],
      institution: [null, [Validators.required]],
      company: [null, [Validators.required]],
      salary: [null, [Validators.required]],
    });
  }

Как видите, все поля формы требуются, кроме Usercategory , что из, конечно, это радиоустановочная кнопка со значением по умолчанию сотрудник Отказ

Давайте назовем Buildform Метод в нашем классе Ngoninit Метод:

ngOnInit() {
    this.buildForm();
  }

Обновление шаблона компонента

После добавления проверки на наших полях реактивной формы нам нужно сделать некоторую корректировку на шаблон компонента. Добавить [ngclass] = "{'form - представленные": formbedubmated} " к каждому из входов формы шаблона. Что-то вроде этого:


С этим NGClass Директива, мы просто попросили угловой, чтобы добавить класс Форма, представленная на вход, когда Formberubmated поле в нашем классе верно. Буквально добавьте класс Форма, представленная на поле ввода всякий раз, когда форма была отправлена. Мы бы использовали класс для стайлинга в следующем разделе.

Использование CSS для выделения недействительных полей формы

На этом этапе мы все еще не можем видеть эффект проверки, которые мы только что реализовали. Нам нужно будет написать некоторые CSS.

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

  • NG-действительный
  • NG-Invalid
  • NG-Toxed
  • НГ-Нетронутый
  • NG-Pristine
  • нг-ожидание
  • NG-грязное

Вы можете узнать больше о каждом из этих классов здесь: Угловые формы классов

Давайте откроем app.component.css и добавьте следующие CSS:

.ng-valid.ng-dirty:not(form) {
  border: solid 2px lightgreen;
}

.ng-invalid.ng-dirty:not(form), .ng-invalid:not(form).form-submitted {
  border: solid 2px lightcoral;
}

Мы делаем здесь две вещи:

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

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

Скриншот 2018-11-22 в 11.44.41 AM.PNG

И это так. Вы узнали, как реализовать проверки в угловой реактивной форме, используя валидаторы Отказ Время перейти к Условная проверка в угловых реактивных формах – Наша следующая тема дня.

Условная проверка в реактивных формах

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

Мы хотим, чтобы наша форма была действительной для следующих условий:

  • Когда Категория пользователя это сотрудник поле учреждение Не следует требоваться: должно быть необязательно.
  • Когда Категория пользователя это Студент , поля Компания и зарплата не должно потребоваться; Они должны быть необязательными.

Это означает, что у нас есть изменения, чтобы сделать Категория пользователя Как пользователь переключает между двумя значениями (сотрудник или студент) Отказ

Давайте доберемся до бизнеса!

Настройка проверки для категории пользователей

Давайте создадим новый метод SetuserCategoryvalidators со следующим кодом:

setUserCategoryValidators() {
    const institutionControl = this.form.get('institution');
    const companyControl = this.form.get('company');
    const salaryControl = this.form.get('salary');

    this.form.get('userCategory').valueChanges
      .subscribe(userCategory => {

        if (userCategory === 'student') {
          institutionControl.setValidators([Validators.required]);
          companyControl.setValidators(null);
          salaryControl.setValidators(null);
        }

        if (userCategory === 'employee') {
          institutionControl.setValidators(null);
          companyControl.setValidators([Validators.required]);
          salaryControl.setValidators([Validators.required]);
        }

        institutionControl.updateValueAndValidity();
        companyControl.updateValueAndValidity();
        salaryControl.updateValueAndValidity();
      });
  }

Давайте обсудить, что здесь происходит:

  • Начнем с точки зрения контроля заинтересованных областей, которые нам нужно проверить, используя наши Это .Form и назначил их локальным переменным – для ресультирования.
  • Затем мы используем наши Это .Form снова, чтобы получить доступ к Usercategory Форма контроля и подписаться на изменения стоимости.
  • Внутри нашей подписки обратного вызова, в первом Если заявление мы проверяем, является ли стоимость Студент Отказ Если это так, мы используем встроенный угловой элемент управления SetValidators Способ добавить проверку на учреждение поле. Мы также используем тот же метод для удаления валидации от Компания и зарплата Поля, устанавливая их в NULL. Этот шаблон также используется для второго Если заявление что в значительной степени интуитивно понятно.
  • Наконец, мы используем угловую форму управления UpdateValueAndvalitelity Способ обновления полей. Важно отметить здесь, что звонит SetValidators Метод без звонка UpdateValueAndvalitelity Метод будет не изменяться в форме. То есть никакие изменения не будут выполнены на форме и его валидациях. UpdateValueAndvalitelity На самом деле этот метод, который информирует угловой, чтобы повлиять на новые изменения, внесенные в элемент управления форм. Следовательно, всегда убедитесь, что он называется после вызова SetValidators на контролях.

Призывая SetuserCategoryvalidators Метод в Ngoninit теперь должен выглядеть так:

ngOnInit() {
    this.buildForm();
    this.setUserCategoryValidators();
  }

Обновление валидации метода сборки

Последнее, что нужно сделать, это обновить проверки формы в методе Custainform:

buildForm() {
    this.form = this.formBuilder.group({
      email: [null, [Validators.required]],
      username: [null, [Validators.required]],
      userCategory: ['employee'],
      institution: [null],
      company: [null, [Validators.required]],
      salary: [null, [Validators.required]],
    });
  }

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

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

Скриншот 2018-11-22 в 2,12,37 вечера.

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

Скриншот 2018-11-22 на 2,33,44 вечера.

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

Заключение

В этом руководстве мы можем охватить следующее:

  • Как создать базовую угловую форму с использованием реактивного подхода
  • Как использовать угловые встроенные валидаторы с реактивными формами
  • Как использовать CSS, чтобы выделить наши недействительные поля формы
  • Как использовать угловую форму управления SetValidators и UpdateValueAndvalitelity Методы для установки условных валидаций на полях формы.

Если вы хотите увидеть полный исходный код, посетите Github repo.

Я хотел бы услышать ваши исправления, предложения или отзывы в разделе «Комментарий». Спасибо за ваше время!