So validieren Sie eckige reaktive Formen

Einführung

In diesem Artikel erfahren Sie mehr über Validierungen in reaktiven Formen in Angular. Wir werden ein einfaches Benutzerregistrierungsformular erstellen und einige integrierte Validierungen darauf implementieren. Neben den integrierten Validierungen werden auch einige benutzerdefinierte Validierungen für die reaktive Form implementiert.

Wir werden die folgenden benutzerdefinierten Validierungen für diese Demo berücksichtigen:

  • Überprüfen Sie die Verfügbarkeit von Benutzernamen
  • Validierung des Passwortmusters
  • Passen Sie das in zwei verschiedenen Feldern eingegebene Passwort an

Schauen Sie sich die Anwendung in Aktion an.

Voraussetzungen

  • Installieren Sie Visual Studio-Code von hier aus
  • Installieren Sie hier die neueste Version von Angular CLI

Quellcode

Holen Sie sich den Quellcode von GitHub.

Erstellen Sie die Angular-App

Navigieren Sie zu dem Ordner, in dem Sie Ihre Projektdatei erstellen möchten. Öffnen Sie ein Befehlsfenster und führen Sie den folgenden Befehl aus:

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

Wir geben den Befehl zum Erstellen einer neuen Angular-Anwendung an. Die Option zum Erstellen des Routing-Moduls ist auf false und die Erweiterung der Stildateien auf false festgelegt scss. Dieser Befehl erstellt das Angular-Projekt mit dem Namen angular-forms-validation.

Ändern Sie die Verzeichnisse in das neue Projekt und öffnen Sie das Projekt in VS Code mit dem folgenden Befehlssatz:

cd angular-forms-validation code .

Installieren Sie Bootstrap

Führen Sie den folgenden Befehl aus, um die Bootstrap-Bibliothek zu installieren:

npm install bootstrap --save

Fügen Sie der styles.scssDatei die folgende Importdefinition hinzu :

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

Erstellen Sie den Validierungsservice

Führen Sie den folgenden Befehl aus, um einen neuen Dienst zu erstellen:

ng g s services\customvalidation

Dieser Befehl erstellt einen Ordner mit dem Namen services, der zwei Dateien enthält - customvalidation.service.tsund customvalidation.service.spec.ts. Öffnen Sie die customvalidation.service.tsDatei und geben Sie den folgenden Code ein:

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

Die Methode patternValidatorwird verwendet, um das Passwortmuster in unserem Formular zu validieren. Der Parameter für diese Methode ist vom Typ, AbstractControlder eine Basisklasse für die ist FormControl.

Wir werden einen regulären Ausdruck verwenden, um das Passwort zu validieren. Wir werden die folgenden vier Bedingungen mit dem regulären Ausdruck validieren:

  • Das Passwort sollte mindestens acht Zeichen lang sein.
  • Es hat mindestens einen Kleinbuchstaben.
  • Es hat mindestens einen Großbuchstaben.
  • Es hat mindestens eine Nummer.

Wenn das Kennwort die Regex-Prüfung nicht besteht, setzen wir die invalidPasswordEigenschaft auf true.

Die Methode MatchPasswordwird verwendet, um die Passwörter in zwei Feldern zu vergleichen. Diese Methode akzeptiert zwei Parameter vom Typ string. Diese Parameter repräsentieren den Namen der Felder, die abgeglichen werden sollen. Wir werden die FormControlfür diese beiden Felder erhalten und dann die Werte in ihnen abgleichen. Wenn die Werte nicht übereinstimmen, setzen wir die passwordMismatchEigenschaft auf true.

Die Methode userNameValidatorwird verwendet, um zu überprüfen, ob der Benutzername bereits vergeben ist oder nicht. Diese Methode akzeptiert einen Parameter vom Typ AbstractControl. Wir werden prüfen, ob der Wert dieses Feldes in einem statischen Array vorhanden ist UserList. Wenn der vom Benutzer eingegebene Wert bereits vorhanden ist, setzen wir die userNameNotAvailableEigenschaft auf true.

Wir verwenden die setTimeoutFunktion, um diese Prüfung alle zwei Sekunden aufzurufen. Dadurch wird sichergestellt, dass der Fehler zwei Sekunden nach dem Ende der Eingabe des Felds durch den Benutzer ausgegeben wird.

Der Einfachheit halber verwenden wir ein statisches Array, um nach der Verfügbarkeit von Benutzernamen zu suchen. Im Idealfall sollte es sich um einen Serviceabruf an den Server handeln, um den Wert in einer Datenbank zu suchen.

Erstellen Sie die reaktive Formularkomponente

Führen Sie den folgenden Befehl aus, um die Komponente für reaktive Formulare zu erstellen:

ng g c reactive-form

Öffnen Sie reactive-form.component.tsden folgenden Code und geben Sie ihn ein:

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.