Как да проверим ъгловите реактивни форми

Въведение

В тази статия ще научим за валидиране в реактивни форми в 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); } } }

We will create a variable registerForm of type FormGroup. In the ngOnInit method, we will set the controls for the form using the FormBuilder class. All the fields are set as a required field for this form. We will invoke the userNameValidator method of the service using the bind function.

For the password field, we will use the compose method to merge in multiple validators into a single function. We will also invoke the MatchPassword method and pass the name of the password and confirmPassword form controls as parameters.

The registerFormControl property will return the form controls of the form. The onSubmit method will print the content of the form on the console if the form is valid and submitted successfully.

Open reactive-form.component.html and put the following code in it:

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.