Поиск по сайту:

Как создать собственный валидатор для реактивных форм в Angular

Введение

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

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

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

Предпосылки

Для выполнения этого урока вам понадобятся:

  • Node.js установлен локально, что можно сделать, следуя инструкциям по установке Node.js и созданию локальной среды разработки.
  • Некоторое знакомство с настройкой проекта Angular.

Это руководство было проверено с помощью Node v15.2.1, npm v6.14.8, @angular/core v11.0.0 и @angular/forms v11. .0.0.

Шаг 1 – Настройка проекта

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

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

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

Перейдите в только что созданный каталог проекта:

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

Для работы с реактивными формами вы будете использовать ReactiveFormsModule вместо FormsModule.

Откройте 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 с ReactiveFormsModule.

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

Пример пользовательского валидатора для этого руководства будет принимать строку URL и гарантировать, что она начинается с протокола https и заканчивается доменом верхнего уровня .io.

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

  1. mkdir 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;
}

В этом коде используется класс Notice AbstractControl, который является базовым классом для FormControl, FormGroup и FormArray. с. Это позволяет получить доступ к значению FormControl.

Этот код проверит, соответствует ли значение startsWith строке символов для https. Он также проверит, содержит ли значение включает строку символов для .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>

На этом этапе вы можете скомпилировать ваше приложение:

  1. npm start

И откройте его в своем веб-браузере. Вы можете взаимодействовать с полями для userName и websiteUrl. Убедитесь, что ваш пользовательский валидатор для ValidateUrl работает должным образом со значением, которое должно удовлетворять условиям https и .io: https: //пример.io.

Заключение

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

Примеры пользовательских валидаторов в формах на основе шаблонов и реактивных формах см. в разделе Проверка пользовательских форм в Angular.

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