Угловая валидация формы

Автор оригинала: Shadab Ansari.

Вступление

Одной из наиболее распространенных функций в любом веб-приложении является предоставление формы пользователям для ввода некоторых данных. Вы используете формы ежедневно для входа в систему, регистрируйте, размещать заказы и т. Д.

Обработка пользовательских входов до проверки может иметь серьезные последствия. Вы можете в конечном итоге хранить недопустимые данные, такие как неверная дата, электронная почта, возраст и т. Д. Это также может быть проблемой безопасности из-за таких атак, как Скрипты по перекрестному сайту (XSS).

Традиционный способ проверки HTML-форм является использованием JavaScript или jQuery. К сожалению, этот подход гарантирует кучу кода.

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

Формы в угловом углу

Угловая форма представляет собой обычную форму HTML с несколькими дополнительными функциями. Для каждого поля (входное, радио, выберите и т. Д.) В форме нам нужен объект FormControl класс. FormControl Объект дает информацию об этом поле. Его ценность , если значение это Действительно и если недействительно, каковы валидация Ошибки , так далее.

Это также обеспечивает состояние поля, такое как коснулся , нетронутый , грязный , Чистый , так далее.

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

Все свойства Форменная группа ( Действительно , Ошибка и т. Д.) Также доступен для FormControl Отказ Например, Действительно Свойство FormControl вернется правда Если все FormControl экземпляры действительны.

Итак, чтобы добавить проверку в угловую форму нам нужны две вещи:

• Хотя бы один Форменная группа объект для формы
• А FormControl объект для каждого поля в форме

Есть Два разных способа К которому эти контрольные объекты Может быть создан. Мы можем предоставить некоторые Директивы В Шаблон из формы и угловата могут создать такие контролирует под капотом для нас. Формы, созданные таким образом, называются Формы, управляемые шаблонами Отказ

Если у нас есть некоторые особенные случаи использования, и мы хотим больше контроля над формой, мы можем явно создавать такие контрольные объекты Отказ Формы созданы таким образом, называются Реактивные формы Отказ

Формы, управляемые шаблонами

В формах, управляемых шаблоном, мы применяем Ngmodel Директива для каждого поля в шаблоне. Угловой создает FormControl Объект под капотом для каждого такого поля и связывает его с соответствующим полем:

  Name
  



  Username
  

Примечание : С Ngmodel требуется обеспечить либо Имя атрибут или определить FormControl как «автономный» в ngmodeptions , в противном случае угловата будет бросать ошибку.

Также в app.module.ts Вам нужно будет добавить Формымодуль к массиву импорта:

import { FormsModule } from '@angular/forms';
// ...some other imports

imports: [
    //...some other imports
    FormsModule
]

Валидация в формах, управляемых шаблонами

Угловой при условии, что некоторые Встроенные валидаторы проверять общие случаи использования. Чтобы использовать встроенные валидаторы, вам нужно будет применить атрибуты проверки в каждую форму формы, где вы хотите некоторую проверку. Эти атрибуты валидации такие же, как обычный атрибуты проверки HTML5, такие как Требуется , Minlength , Maxlength И т. Д. В соответствии с HOD угловой угла дал директивы соответствуют этим атрибутам с помощью функций валидатора, определенными в угловой структуре.

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

Допустим, мы хотим вложить в него следующие проверки:

• Как поля Имя и Имя пользователя иметь Требуется Атрибут, мы хотим отобразить сообщения проверки, если это поле осталось пустым.
• Имя поле должно иметь значение, чей Minlegth и Maxlength должно быть 2 и 30 символов соответственно.
• Если имена пользователя имеет пробелы, отобразите недопустимое имя пользователя.

Для каждого элемента управления формой, в котором мы хотим добавить проверку, нам нужно добавить соответствующие атрибуты проверки и экспорт Ngmodel к местному Переменная шаблона :

В приведенном выше примере мы использовали следующие встроенные валидаторы – Требуется , Minlength и Maxlength Отказ

Мы можем использовать переменную шаблона Имя В шаблоне для проверки состояний проверки используемых валидаторов:

  

    Name is required.
  
  

    Name cannot be more than 30 characters long.
  
  

    Name must be at least 2 characters long.
  

Как мы использовали условное утверждение, чтобы сделать первый Div , это будет отображаться только, если статус встроенного валидатора есть Неверный Отказ Мы объяснили в начале раздела, как статус определяется как Действительно или Неверный Отказ

Точно так же внутреннее Div's будет отображаться только в том случае, если шаблон переменной Имя имеет свойство Ошибки и Ошибки Собственность имеет один из следующих свойств – Требуется , Minlength и Maxlength и значение свойства ID правда Отказ Мы уже обсудили, как переменная шаблона связывается с Ngmodel Директива и она принимает эти свойства каждый раз, когда есть какие-либо изменения в контроле формы, и после того, как угловые запускаются проверкой для этого поля.

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

• Пользователь меняет некоторое значение, то есть поле загрязнена ( formcontrolobject.dirty )
• Пользователь использует вкладку или нажимает для переключения фокусировки на какой-то другой элемент, то есть поле было затронуто ( formcontrolobject.touched )

Если вы хотите обратиться к полному списку встроенных валидаторов Angular, вы можете следовать за Валидаторы API Отказ

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

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

Функция валидатора реализует Validatorfn Интерфейс, что означает, что он должен иметь подпись:

interface ValidatorFn {
    (control: AbstractControl): ValidationErrors | null
}

ValidationErrors должен быть объектом, который имеет одно или несколько пар клавишных значений:

type ValidationErrors = {
    [key: string]: any;
};

Ключ должен быть строкой и используется для обозначения типа ошибки проверки, как InvalideMail , Требуется и т. Д. Значение может быть чем-либо и используется для снабжения большей информации о ошибке проверки.

Для приведенного выше примера мы хотим написать пользовательскую функцию проверки, которая подтверждает, если нет пробелов в Имя пользователя Отказ

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

import { ValidationErrors, AbstractControl } from '@angular/forms';

export class UserRegistrationFormValidators {
    static usernameShouldBeValid(control: AbstractControl): ValidationErrors | null {
        if ((control.value as string).indexOf(' ') >= 0) {
            return { shouldNotHaveSpaces: true }
        }

        // If there is no validation failure, return null
        return null;
    }
}

Примечание : В этом примере мы вернулись правда Как ценность ключа Должние пространства Потому что нам не нужно предоставлять какие-либо детали. В некоторых случаях вам может потребоваться предоставление деталей, например:

return { maxlengthExceeded: {
        maxLength: 20,
        actual: control.value.length
    }
}

Далее мы можем использовать эту функцию Validator UserregistrationFormVValidators.usernameshouseBevalid для Имя пользователя Форма-контроль в нашей форме, управляемой шаблоном:

  Username
  

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

В реактивных формах мы создаем FormControl Объекты явно в Компонент этого шаблона. Вот обычная форма HTML без каких-либо Ngmodel Директива или проверки:

  Name
  



  Username
  

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

Для этого сначала нам нужно явно создавать Форменная группа и FormControls Для каждого поля в Компонент шаблона:

form = new FormGroup({
    'name': new FormControl(),
    'username': new FormControl(),
})

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

registrationForm = new FormGroup({
    'personalDetailsForm': new FormGroup({
        'name': new FormControl()
    })
})

Вы можете прочитать больше о Форменная группа В Угловая документация Отказ

Позвольте мне привлечь ваше внимание к нашему использованию.

Далее нам нужно ассоциировать эти FormControl Объекты на поля в формате HTML.

  Name
  



  Username
  

Здесь мы применили Форменная группа Директива и связана с этим с Форменная группа объект Регистрация формы что мы создали в Компонент Отказ Мы также ассоциировали FormControlName Директива с соответствующей FormControl Объекты Имя и Имя пользователя Отказ

Примечание : Директивы построить Реактивные формы определены в РеактивенформСмодуль Отказ Так что, если вы получите ошибку, такую как:

Can't bind to formGroup

… Тогда вы должны проверить, если вы импортировали это РеактивенформСмодуль В вашем основном модуле app.module.ts Отказ

Валидации в реактивных формах

В реактивных формах мы не проходим Ngmodel Директива, и мы также не используем атрибуты проверки HTML5. Мы указываем валидаторы при создании объектов FormControl в сам компонент.

Вот подпись FormControl класс:

class FormControl extends AbstractControl {
    constructor(formState: any = null, validatorOrOpts?: ValidatorFn | AbstractControlOptions | ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[])

    // ...
}

Как мы видим, первый параметр – это начальное состояние контроля, которое может быть сохранено пустым I.E '' Отказ Второй параметр – Validatorfn Отказ

Чтобы добавить встроенные функции Validator для FormControl Мы можем передать это подходящее Validatorfn Отказ Для следующего примера мы использовали следующие встроенные валидаторы Требуется , Minlength и Maxlength -:

registrationForm = new FormGroup({
    'name': new FormControl('Enter your name', [
        Validators.required,
        Validators.minLength(2),
        Validators.maxLength(30)
    ]),
    'username': new FormControl('', Validators.required),
})

Примечание : Вам нужно было импортировать Валидаторы в компоненте.

Пожалуйста, также обратите внимание, в отличие от форм, ориентированных на шаблон, мы не используем Атрибуты валидации Отказ Мы используем соответствующую Validatorfn как Валидаторы. Разумить , Validators.minlength (2) и т. Д. Ваш редактор кода может предоставить автозаполнение для всех Validatorfn момент, когда вы вводите Валидаторы сопровождаемый точкой Отказ Отказ

Мы можем вернуться к Шаблон и запись сообщений проверки:

  Name
  
  

    

       Name is required.
    
    

       Name cannot be more than 30 characters long.
    
    

       Name must be at least 2 characters long.
    
  



  Username
  

Пользовательские валидаторы для реактивных форм

Нам нужно написать Функция пользовательского валидатора так же, как мы это сделали для Шаблон, управляемый Секция формы. Мы можем использовать такую же функцию пользовательского валидатора UserregistrationFormVValidators.usernameshouseBevalid В компоненте для Реактивная форма :

registrationForm = new FormGroup({
    'name': new FormControl('Enter your name', [
        Validators.required,
        Validators.minLength(2),
        Validators.maxLength(30)
    ]),
    'username': new FormControl('', [
        Validators.required,
        UserRegistrationFormValidators.usernameShouldBeValid
    ]),
})

Заключение

В этом руководстве мы исследовали два разных способа обработки пользовательских входов – приводимых на шаблонах и реактивных формах. Мы научились поставить проверку как на обоих типах форм. И, наконец, мы также написали нашу собственную функцию валидатора и включали в себя встроенные валидаторы.

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