Comment valider les formes réactives angulaires

introduction

Dans cet article, nous allons découvrir les validations sous formes réactives dans Angular. Nous créerons un simple formulaire d'inscription d'utilisateur et y implémenterons des validations intégrées. En plus des validations intégrées, nous implémenterons également des validations personnalisées dans le formulaire réactif.

Nous considérerons les validations personnalisées suivantes pour cette démo:

  • Vérifier la disponibilité du nom d'utilisateur
  • Validation du modèle de mot de passe
  • Faites correspondre le mot de passe saisi dans deux champs différents

Jetez un œil à l'application en action.

Conditions préalables

  • Installez le code Visual Studio à partir d'ici
  • Installez la dernière version de Angular CLI à partir d'ici

Code source

Obtenez le code source de GitHub.

Créez l'application Angular

Accédez au dossier dans lequel vous souhaitez créer votre fichier de projet. Ouvrez une fenêtre de commande et exécutez la commande ci-dessous:

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

Nous spécifions la commande pour créer une nouvelle application angulaire. L'option de création du module de routage est définie sur false et l'extension des fichiers de style est définie sur scss. Cette commande créera le projet Angular avec le nom angular-forms-validation.

Remplacez les répertoires par le nouveau projet et ouvrez le projet dans VS Code à l'aide de l'ensemble de commandes ci-dessous:

cd angular-forms-validation code .

Installer Bootstrap

Exécutez la commande suivante pour installer la bibliothèque Bootstrap:

npm install bootstrap --save

Ajoutez la définition d'importation suivante dans le styles.scssfichier:

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

Créer le service de validation

Exécutez la commande suivante pour créer un nouveau service:

ng g s services\customvalidation

Cette commande créera un dossier nommé services contenant deux fichiers - customvalidation.service.tset customvalidation.service.spec.ts. Ouvrez le customvalidation.service.tsfichier et mettez-y le code suivant:

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); } }

La méthode patternValidatorest utilisée pour valider le modèle de mot de passe dans notre formulaire. Le paramètre de cette méthode est de type AbstractControlqui est une classe de base pour le FormControl.

Nous utiliserons une expression régulière pour valider le mot de passe. Nous validerons les quatre conditions suivantes à l'aide de l'expression régulière:

  • Le mot de passe doit comporter au moins huit caractères.
  • Il a au moins une lettre minuscule.
  • Il comporte au moins une lettre majuscule.
  • Il a au moins un numéro.

Si le mot de passe échoue à la vérification de l'expression régulière, nous définirons la invalidPasswordpropriété sur true.

La méthode MatchPasswordest utilisée pour comparer les mots de passe dans deux champs. Cette méthode acceptera deux paramètres de type string. Ces paramètres représentent le nom des champs à mettre en correspondance. Nous obtiendrons le FormControlpour ces deux champs, puis nous ferons correspondre les valeurs qu'ils contiennent. Si les valeurs ne correspondent pas, nous définirons la passwordMismatchpropriété sur true.

La méthode userNameValidatorest utilisée pour vérifier si le nom d'utilisateur est déjà utilisé ou non. Cette méthode acceptera un paramètre de type AbstractControl. Nous allons vérifier si la valeur de ce champ est présente dans un tableau statique, UserList. Si la valeur saisie par l'utilisateur est déjà présente, nous définirons la userNameNotAvailablepropriété sur true.

Nous utilisons la setTimeoutfonction pour invoquer cette vérification toutes les deux secondes. Cela garantira que l'erreur sera générée deux secondes après le moment où l'utilisateur arrête de taper dans le champ.

Par souci de simplicité de cet article, nous utilisons un tableau statique pour rechercher la disponibilité des noms d'utilisateurs. Idéalement, il devrait s'agir d'un appel de service au serveur pour rechercher la valeur dans une base de données.

Créer le composant de formulaire réactif

Exécutez la commande suivante pour créer le composant de formulaire réactif:

ng g c reactive-form

Ouvrez reactive-form.component.tset mettez le code suivant dedans:

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); } } }

Nous allons créer une variable registerFormde type FormGroup. Dans la ngOnInitméthode, nous définirons les contrôles du formulaire à l'aide de la FormBuilderclasse. Tous les champs sont définis comme un champ obligatoire pour ce formulaire. Nous invoquerons la userNameValidatorméthode du service en utilisant la fonction bind.

Pour le champ de mot de passe, nous utiliserons la méthode compose pour fusionner plusieurs validateurs en une seule fonction. Nous allons également appeler la MatchPasswordméthode et transmettre le nom des contrôles passwordet confirmPasswordform en tant que paramètres.

La registerFormControlpropriété renverra les contrôles de formulaire du formulaire. La onSubmitméthode imprimera le contenu du formulaire sur la console si le formulaire est valide et soumis avec succès.

Ouvrez reactive-form.component.htmlet mettez le code suivant dedans:

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.