Sådan valideres kantede reaktive former

Introduktion

I denne artikel vil vi lære om valideringer i reaktive former i Angular. Vi opretter en simpel brugerregistreringsformular og implementerer nogle indbyggede valideringer på den. Sammen med de indbyggede valideringer implementerer vi også nogle brugerdefinerede valideringer til den reaktive form.

Vi vil overveje følgende brugerdefinerede valideringer til denne demo:

  • Kontroller, om brugernavnet er tilgængeligt
  • Validering af adgangskodemønster
  • Match den indtastede adgangskode i to forskellige felter

Se på applikationen i aktion.

Forudsætninger

  • Installer Visual Studio-kode herfra
  • Installer den nyeste version af Angular CLI herfra

Kildekode

Få kildekoden fra GitHub.

Opret Angular-appen

Naviger til den mappe, hvor du vil oprette din projektfil. Åbn et kommandovindue, og kør kommandoen vist nedenfor:

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

Vi specificerer kommandoen til at oprette en ny Angular-applikation. Muligheden for at oprette routingsmodulet er indstillet til falsk, og stilfiltypenavnet er indstillet til scss. Denne kommando opretter Angular-projektet med navnet angular-forms-validation.

Skift mapper til det nye projekt, og åbn projektet i VS-kode ved hjælp af kommandosættet vist nedenfor:

cd angular-forms-validation code .

Installer Bootstrap

Kør følgende kommando for at installere Bootstrap-biblioteket:

npm install bootstrap --save

Tilføj følgende importdefinition i styles.scssfilen:

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

Opret valideringstjenesten

Kør følgende kommando for at oprette en ny tjeneste:

ng g s services\customvalidation

Denne kommando opretter en mappe med navnet services, der har to filer i sig - customvalidation.service.tsog customvalidation.service.spec.ts. Åbn customvalidation.service.tsfilen og læg følgende kode i den:

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

Metoden patternValidatorbruges til at validere adgangskodemønsteret i vores form. Parameteren for denne metode er af typen, AbstractControlder er en basisklasse for FormControl.

Vi bruger et regulært udtryk til at validere adgangskoden. Vi validerer følgende fire betingelser ved hjælp af det regulære udtryk:

  • Adgangskoden skal være mindst otte tegn lang.
  • Den har mindst et lille bogstav.
  • Den har mindst et stort bogstav.
  • Det har mindst et nummer.

Hvis adgangskoden mislykkes med regex-kontrollen, indstiller vi invalidPasswordejendommen til sand.

Metoden MatchPasswordbruges til at sammenligne adgangskoder i to felter. Denne metode accepterer to parametre af typestrengen. Disse parametre repræsenterer navnet på de felter, der skal matches. Vi får de FormControlfor disse to felter og matcher derefter værdierne i dem. Hvis værdierne ikke stemmer overens, indstiller vi passwordMismatchegenskaben til sand.

Metoden userNameValidatorbruges til at kontrollere, om brugernavnet allerede er taget eller ej. Denne metode accepterer en parameter af typen AbstractControl. Vi vil kontrollere, om værdien af ​​dette felt er til stede i et statisk array UserList. Hvis den værdi, der er indtastet af brugeren allerede er til stede, indstiller vi userNameNotAvailableejendommen til sand.

Vi bruger setTimeoutfunktionen til at påkalde denne kontrol hvert andet sekund. Dette vil sikre, at fejlen smides efter to sekunder fra det tidspunkt, hvor brugeren holder op med at skrive i feltet.

Af hensyn til denne artikels enkelhed bruger vi et statisk array til at søge efter tilgængeligheden af ​​brugernavne. Ideelt set bør det være et serviceopkald til serveren for at søge i værdien i en database.

Opret den reaktive formkomponent

Kør følgende kommando for at oprette den reaktive formkomponent:

ng g c reactive-form

Åbn reactive-form.component.tsog sæt følgende kode i den:

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

Vi opretter en variabel registerFormaf typen FormGroup. I ngOnInitmetoden indstiller vi kontrolelementerne til formularen ved hjælp af FormBuilderklassen. Alle felter er angivet som et obligatorisk felt til denne formular. Vi påkalder userNameValidatormetoden til tjenesten ved hjælp af bindefunktionen.

I adgangskodefeltet bruger vi komponeringsmetoden til at flette flere validatorer til en enkelt funktion. Vi vil også fremkaldes MatchPasswordmetode og passerer navnet på den passwordog confirmPasswordformularkontroller som parametre.

Den registerFormControlegenskab vil returnere formularkontrolelementerne af formen. Den onSubmitmetode vil udskrive indholdet af formularen på konsollen, hvis formen er gyldig og sendt.

Åbn reactive-form.component.htmlog sæt følgende kode i den:

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

Vi har oprettet en prøve brugerregistreringsformular ved hjælp af den reaktive form tilgang i Angular. Vi har implementeret de indbyggede valideringer såvel som brugerdefinerede valideringer til formularen. Bootstrap-biblioteket bruges til at style formularen.

Få kildekoden fra GitHub, og leg med den for at få en bedre forståelse.

Se også

  • Lokalisering i vinkel ved hjælp af i18n-værktøjer
  • Skabelonbaseret formvalidering i vinkel
  • Forståelse af vinkel animation
  • Politikbaseret godkendelse i vinkel ved hjælp af JWT
  • Facebook-godkendelse og godkendelse i Blazor-app på serversiden

Du kan finde andre indlæg som reaktiv formvalidering i vinkel på Ankit Sharmas blog.