Τρόπος επικύρωσης γωνιακών αντιδραστικών φορμών

Εισαγωγή

Σε αυτό το άρθρο, θα μάθουμε για επικυρώσεις σε αντιδραστικές φόρμες στο Angular. Θα δημιουργήσουμε μια απλή φόρμα εγγραφής χρήστη και θα εφαρμόσουμε μερικές ενσωματωμένες επικυρώσεις σε αυτήν. Μαζί με τις ενσωματωμένες επικυρώσεις, θα εφαρμόσουμε επίσης ορισμένες προσαρμοσμένες επικυρώσεις στην αντιδραστική φόρμα.

Θα λάβουμε υπόψη τις ακόλουθες προσαρμοσμένες επικυρώσεις για αυτήν την επίδειξη:

  • Ελέγξτε για διαθεσιμότητα ονόματος χρήστη
  • Επικύρωση μοτίβου κωδικού πρόσβασης
  • Ταιριάξτε τον κωδικό πρόσβασης που έχετε εισαγάγει σε δύο διαφορετικά πεδία

Ρίξτε μια ματιά στην εφαρμογή σε δράση.

Προαπαιτούμενα

  • Εγκαταστήστε τον κώδικα Visual Studio από εδώ
  • Εγκαταστήστε την τελευταία έκδοση του Angular CLI από εδώ

Πηγαίος κώδικας

Λάβετε τον πηγαίο κώδικα από το GitHub.

Δημιουργήστε την εφαρμογή Angular

Μεταβείτε στο φάκελο στον οποίο θέλετε να δημιουργήσετε το αρχείο έργου σας. Ανοίξτε ένα παράθυρο εντολών και εκτελέστε την παρακάτω εντολή:

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

Προσδιορίζουμε την εντολή για τη δημιουργία μιας νέας γωνιακής εφαρμογής. Η επιλογή δημιουργίας της μονάδας δρομολόγησης έχει οριστεί σε ψευδής και η επέκταση αρχείων στυλ έχει οριστεί σε scss. Αυτή η εντολή θα δημιουργήσει το έργο Angular με το όνομα angular-forms-validation.

Αλλάξτε τους καταλόγους στο νέο έργο και ανοίξτε το έργο σε κώδικα VS χρησιμοποιώντας το σύνολο εντολών που φαίνεται παρακάτω:

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.

Θα χρησιμοποιήσουμε μια κανονική έκφραση για την επικύρωση του κωδικού πρόσβασης. Θα επικυρώσουμε τις ακόλουθες τέσσερις συνθήκες χρησιμοποιώντας την κανονική έκφραση:

  • Ο κωδικός πρόσβασης πρέπει να έχει τουλάχιστον οκτώ χαρακτήρες.
  • Έχει τουλάχιστον ένα πεζό γράμμα.
  • Έχει τουλάχιστον ένα κεφαλαίο γράμμα.
  • Έχει τουλάχιστον έναν αριθμό.

Εάν ο κωδικός πρόσβασης αποτύχει στον έλεγχο regex, θα ορίσουμε την 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

Δημιουργήσαμε ένα δείγμα φόρμας εγγραφής χρήστη χρησιμοποιώντας την προσέγγιση αντιδραστικής φόρμας στο Angular. Έχουμε εφαρμόσει τις ενσωματωμένες επικυρώσεις καθώς και προσαρμοσμένες επικυρώσεις στη φόρμα. Η βιβλιοθήκη Bootstrap χρησιμοποιείται για το στυλ της φόρμας.

Λάβετε τον πηγαίο κώδικα από το GitHub και παίξτε μαζί του για καλύτερη κατανόηση.

Δείτε επίσης

  • Εντοπισμός σε γωνιακή χρήση εργαλείων i18n
  • Επικύρωση φόρμας βάσει προτύπου υπό γωνία
  • Κατανόηση της γωνιακής ζωτικότητας
  • Εξουσιοδότηση βάσει πολιτικής σε γωνιακή χρήση JWT
  • Έλεγχος ταυτότητας και εξουσιοδότηση Facebook στην εφαρμογή Blazor από διακομιστή

Μπορείτε να βρείτε άλλες αναρτήσεις όπως το Reactive Form Validation στο Angular στο Ankit Sharma's Blog.