Создание валидатора для реактивных форм Angular

Development, Java | Amber | Комментировать запись

В Angular есть пакет angular/forms. Он поставляется с классом Validators, который поддерживает полезные встроенные валидаторы, такие как required, minLength, maxLength и pattern. Однако некоторые формы могут содержать поля, для обработки которых понадобятся более сложные или нестандартные правила. В той ситуации можно создать пользовательский валидатор.

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

Читайте также: Введение в реактивные формы Angular

В этом руководстве мы создадим реактивную форму с многоразовым пользовательским валидатором, который сможет проверить, соответствует ли URL заданным условиям.

Требования

• Локальная установка Node.js (здесь вы найдете инструкции для macOS, Debian, Ubuntu, Centos).
• Базовые навыки настройки проекта Angular.

Этот мануал протестирован на версиях Node v15.2.1, npm v6.14.8, @angular/core v11.0.0 и @angular/forms v11.0.0.

1: Настройка проекта

В рамках этого мануала мы соберем базовый, стандартный проект Angular, сгенерированный с помощью @angular/cli.

npx @angular/cli new angular-reactive-forms-custom-validtor-example --style=css --routing=false --skip-tests

Эта команда настроит новый проект Angular со стилями CSS (также доступны Sass, Less и Stylus), без маршрутизации и тестов.

Перейдите в каталог вашего нового проекта:

cd angular-reactive-forms-custom-validator-example

Для работы с реактивными формами вместо FormsModule нужно использовать ReactiveFormsModule. Откройте файл app.module.ts в редакторе кода и добавьте конфигурации ReactiveFormsModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ReactiveFormsModule,
],
providers: [],
bootstrap: [AppComponent] })
export class AppModule { }

На этом этапе у вас должен быть новый проект Angular с поддержкой реактивных форм.

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

В данном руководстве мы создадим валидатор, который будет принимать URL-адрес и проверять его на наличие протокола https в начале и домена верхнего уровня .io – в конце.

Прежде всего откройте терминал и создайте каталог shared:

mkdir src/shared

Затем в этом каталоге создайте файл url.validator.ts. Откройте файл src/shared/url.validator.ts в редакторе кода и добавьте в него следующие строки:

import { AbstractControl } from '@angular/forms';
export function ValidateUrl(control: AbstractControl) {
if (!control.value.startsWith('https') || !control.value.includes('.io')) {
return { invalidUrl: true };
}
return null;
}

В этом коде используется класс AbstractControl, который является базовым для FormControls, FormGroups и FormArrays. Он позволяет получить доступ к значению FormControl.

При помощи параметра startsWith этот код проверяет, начинается ли проверяемое значение со строки символов https. Кроме того, с помощью includes код проверит, включает ли значение строку символов .io.

Если значение не прошло проверку, валидатор вернет объект, где ключ – имя ошибки invalidUrl, а значение – true. В противном случае, если проверка пройдена успешно, он вернет null.

На этом этапе пользовательский валидатор готов к работе.

3: Использование валидатора

Теперь создайте форму, которая принимает userName и websiteUrl.

Для этого откройте файл app.component.ts и замените его текущее содержимое следующими строками:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ValidateUrl } from '../shared/url.validator';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'] })
export class AppComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.myForm = this.fb.group({
userName: ['', Validators.required],
websiteUrl: ['', [Validators.required, ValidateUrl]] });
}
saveForm(form: FormGroup) {
console.log('Valid?', form.valid); // true or false
console.log('Username', form.value.userName);
console.log('Website URL', form.value.websiteUrl);
}
}

В этом коде элемент управления формой websiteUrl одновременно использует встроенный валидатор Validators.required и наш пользовательский, ValidateUrl.

4: Информация об ошибках

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

Откройте файл app.component.html и замените его содержимое следующими строками:

<form [formGroup]="myForm" ngSubmit)="saveForm(myForm)">
<div>
<label>
Username:
<input formControlName="userName" placeholder="Your username">
</label>
<div *ngIf="(
myForm.get('userName').dirty ||
myForm.get('userName').touched
) &&
myForm.get('userName').invalid"
>
Please provide your username.
</div>
</div>
<div>
<label>
Website URL:
<input formControlName="websiteUrl" placeholder="Your website">
</label>
<div
*ngIf="(
myForm.get('websiteUrl').dirty ||
myForm.get('websiteUrl').touched
) &&
myForm.get('websiteUrl').invalid"
>
Only URLs served over HTTPS and from the .io top-level domain are accepted.
</div>
</div>
</form>

Следующий наш шаг – скомпилировать приложение. Для этого введите:

npm start

Попробуйте открыть свое приложение в браузере и ввести что-нибудь в поля userName и websiteUrl. Убедитесь, что пользовательский валидатор ValidateUrl работает должным образом; для этого введите значение, которое отвечает условиям (например, https://example.io) и которое не подходит (к примеру, http://example.io).

Заключение

В этом мануале вы создали многоразовый пользовательский валидатор реактивной формы для приложения Angular.

Если вы хотите узнать об Angular больше, посетите этот раздел нашего блога, где вы найдете много других статей, примеров и упражнений.