Як перевірити кутові реактивні форми

Вступ

У цій статті ми дізнаємося про перевірки в реактивних формах у Angular. Ми створимо просту реєстраційну форму користувача та застосуємо на ній деякі вбудовані перевірки. Поряд із вбудованими валідаціями ми також реалізуємо деякі спеціальні валідації у реактивній формі.

Ми розглянемо такі спеціальні перевірки для цієї демонстрації:

  • Перевірте наявність імені користувача
  • Перевірка шаблону пароля
  • Зіставте пароль, введений у два різні поля

Погляньте на дію програми.

Передумови

  • Встановіть код Visual Studio звідси
  • Встановіть найновішу версію Angular CLI звідси

Вихідний код

Отримайте вихідний код від GitHub.

Створіть програму Angular

Перейдіть до папки, де ви хочете створити файл проекту. Відкрийте вікно команд і запустіть команду, показану нижче:

ng new angular-forms-validation --routing=false --style=scss

Ми вказуємо команду для створення нового додатка Angular. Для опції створення модуля маршрутизації встановлено значення false, а для розширення файлів стилів - значення scss. Ця команда створить проект Angular з назвою angular-forms-validation.

Змініть каталоги на новий проект і відкрийте проект у VS Code, використовуючи набір команд, показаний нижче:

cd angular-forms-validation code .

Встановіть Bootstrap

Виконайте таку команду, щоб встановити бібліотеку Bootstrap:

npm install bootstrap --save

Додайте таке визначення імпорту у styles.scssфайл:

@import "~bootstrap/dist/css/bootstrap.css";

Створіть службу перевірки

Виконайте таку команду, щоб створити нову службу:

ng g s services\customvalidation

Ця команда створить папку з назвою служби, в якій є два файли - customvalidation.service.tsі customvalidation.service.spec.ts. Відкрийте customvalidation.service.tsфайл і вставте в нього наступний код:

import { Injectable } from '@angular/core'; import { ValidatorFn, AbstractControl } from '@angular/forms'; import { FormGroup } from '@angular/forms'; @Injectable({ providedIn: 'root' }) export class CustomvalidationService { patternValidator(): ValidatorFn { return (control: AbstractControl): { [key: string]: any } => { if (!control.value) { return null; } const regex = new RegExp('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$'); const valid = regex.test(control.value); return valid ? null : { invalidPassword: true }; }; } MatchPassword(password: string, confirmPassword: string) { return (formGroup: FormGroup) => { const passwordControl = formGroup.controls[password]; const confirmPasswordControl = formGroup.controls[confirmPassword]; if (!passwordControl || !confirmPasswordControl) { return null; } if (confirmPasswordControl.errors && !confirmPasswordControl.errors.passwordMismatch) { return null; } if (passwordControl.value !== confirmPasswordControl.value) { confirmPasswordControl.setErrors({ passwordMismatch: true }); } else { confirmPasswordControl.setErrors(null); } } } userNameValidator(userControl: AbstractControl) { return new Promise(resolve => { setTimeout(() => { if (this.validateUserName(userControl.value)) { resolve({ userNameNotAvailable: true }); } else { resolve(null); } }, 1000); }); } validateUserName(userName: string) { const UserList = ['ankit', 'admin', 'user', 'superuser']; return (UserList.indexOf(userName) > -1); } }

Метод patternValidatorвикористовується для перевірки шаблону пароля у нашій формі. Параметр для цього методу має тип, AbstractControlякий є базовим класом для FormControl.

Ми будемо використовувати регулярний вираз для перевірки пароля. Ми перевіримо наступні чотири умови, використовуючи регулярний вираз:

  • Пароль повинен містити не менше восьми символів.
  • У ньому є принаймні одна мала літера.
  • У ньому є принаймні одна велика літера.
  • Він має принаймні одне число.

Якщо пароль не вдається перевірити регулярний вираз, ми встановимо для invalidPasswordвластивості значення true.

Метод MatchPasswordвикористовується для порівняння паролів у двох полях. Цей метод приймає два параметри типу string. Ці параметри представляють назву полів, які потрібно зіставити. Ми отримаємо FormControlдля цих двох полів, а потім зрівняємо значення в них. Якщо значення не збігаються, ми встановимо для passwordMismatchвластивості true.

Метод userNameValidatorвикористовується для перевірки того, чи ім’я користувача вже зайняте чи ні. Цей метод приймає параметр типу AbstractControl. Ми будемо перевіряти , якщо значення цього поля є в статичному масиві UserList. Якщо значення, введене користувачем, уже присутнє, ми встановимо для userNameNotAvailableвластивості значення true.

Ми використовуємо setTimeoutфункцію для виклику цієї перевірки кожні дві секунди. Це забезпечить видалення помилки через дві секунди з моменту, коли користувач припинить вводити текст у поле.

Для простоти цієї статті ми використовуємо статичний масив для пошуку наявності імен користувачів. В ідеалі це повинен бути виклик служби на сервер для пошуку значення в базі даних.

Створіть компонент реактивної форми

Виконайте таку команду, щоб створити компонент реактивної форми:

ng g c reactive-form

Відкрийте reactive-form.component.tsта вставте в нього наступний код:

import { Component, OnInit } from '@angular/core'; import { Validators, FormGroup, FormBuilder } from '@angular/forms'; import { CustomvalidationService } from '../services/customvalidation.service'; @Component({ selector: 'app-reactive-form', templateUrl: './reactive-form.component.html', styleUrls: ['./reactive-form.component.scss'] }) export class ReactiveFormComponent implements OnInit { registerForm: FormGroup; submitted = false; constructor( private fb: FormBuilder, private customValidator: CustomvalidationService ) { } ngOnInit() { this.registerForm = this.fb.group({ name: ['', Validators.required], email: ['', [Validators.required, Validators.email]], username: ['', [Validators.required], this.customValidator.userNameValidator.bind(this.customValidator)], password: ['', Validators.compose([Validators.required, this.customValidator.patternValidator()])], confirmPassword: ['', [Validators.required]], }, { validator: this.customValidator.MatchPassword('password', 'confirmPassword'), } ); } get registerFormControl() { return this.registerForm.controls; } onSubmit() { this.submitted = true; if (this.registerForm.valid) { alert('Form Submitted succesfully!!!\n Check the values in browser console.'); console.table(this.registerForm.value); } } }

Ми створимо змінну registerFormтипу FormGroup. У ngOnInitметоді ми встановимо елементи керування для форми, використовуючи FormBuilderклас. Усі поля встановлюються як обов’язкове для цієї форми. Ми будемо викликати userNameValidatorметод служби за допомогою функції прив'язки.

Для поля пароля ми використовуватимемо метод композиції для об’єднання декількох валідаторів в одну функцію. Ми також застосуємо MatchPasswordметод і передамо ім'я елементів керування passwordі confirmPasswordформи як параметри.

registerFormControlВластивість буде повертати елементи форми виду. onSubmitМетод друк вмісту форми на консолі , якщо форма є дійсною і успішно відправлено.

Відкрийте reactive-form.component.htmlта вставте в нього наступний код:

Angular Reactive Form

Name Name is required Email Email is required Enter a valid email address User Name User Name is required User Name is not available Password Password is required Password should have minimum 8 characters, at least 1 uppercase letter, 1 lowercase letter and 1 number Confirm Password Confirm Password is required Passwords doesnot match Register

We will create a reactive form and use the Bootstrap card for styling. The card header will contain a title whereas the card body will have the form fields. We will bind the formGroup property of the tag to the name of our form which is registerForm. The onSubmit method will be invoked on submitting the form. We will also bind the formControlName property of each input field to the control name of our FormGroup. We will check for errors in the form controls and then display the appropriate validation error message on the screen.

Create the nav-bar component

Run the following command to create the nav-bar component:

ng g c nav-bar

Open nav-bar.component.html and put the following code in it:

 Form Validation Demo 
  • Reactive Form

We are adding the navigation link to the reactive form component in the nav bar.

Update the app component

Open the app.component.html file and put the following code in it:

Update the App module

Add the following code in the app.module.ts file. We will import the forms module and define the routing for our application. You can refer to GitHub for the complete source code of this file.

import { RouterModule } from '@angular/router'; import { ReactiveFormsModule } from '@angular/forms'; @NgModule({ ... imports: [ ... ReactiveFormsModule, RouterModule.forRoot([ { path: '', component: ReactiveFormComponent }, { path: 'reactive-form', component: ReactiveFormComponent } ]), ], })

Execution demo

We will use the following command to start the web server:

ng serve -o

This command will launch the application in your default browser at //localhost:4200/. You can perform all the form validations which we have discussed here.

This application is also hosted at //ng-forms-validation.herokuapp.com/. Navigate to the link and play around with it for a better understanding.

Summary

We have created a sample user registration form using the reactive form approach in Angular. We have implemented the inbuilt validations as well as custom validations to the form. The Bootstrap library is used to style the form.

Get the source code from GitHub and play around with it for a better understanding.

See Also

  • Localization In Angular Using i18n Tools
  • Template-Driven Form Validation In Angular
  • Understanding Angular Animation
  • Policy-Based Authorization In Angular Using JWT
  • Facebook Authentication And Authorization In Server-Side Blazor App

You can find other posts like Reactive Form Validation in Angular on Ankit Sharma's Blog.