اعتبار سنجی فرم به روش Template-Driven Forms در انگولار 7

دوشنبه ۲۲ دی ۱۳۹۹
بازدید ۸۵۶ نفر
AmRo
(5 امتیاز از 1 رای)
Loading...

تصویر angular-7-template-driven-forms-validation_7097 اعتبار سنجی فرم به روش Template-Driven Forms در انگولار 7

اعتبار سنجی فرم به روش Template-Driven Forms در انگولار 7

در این بخش با یک مثال ساده چگونگی اعتبار سنجی فرم های Template-Driven در انگولار 7 را بررسی خواهیم کرد. در ادامه ما یک فرم ثبت نام ساده با فیلدهای رایج (مانند first name، last name، email، password و confirm password) ایجاد می کنیم که تمامی فیلدهای آن الزامی (required) هستند، به گونه ای که ایمیل وارد شده باید یک ایمیل معتبر باشد و پسوردهای وارد شده هم حداقل شش کاراکتر باشد. همچنین یک validator سفارشی به نام MustMatch برای بررسی مقدار فیلد های password و confirm password ایجاد خواهیم کرد.

توجه! ظاهر فرم ثبت نام با استفاده از CSS و Bootstrap 4 طراحی شده است.

قالب کامپوننت اصلی (App Component Template)

قالب کامپوننت اصلی شامل کدهای HTML مربوط به فرم ثبت نام است که توسط مرورگر نمایش داده می شود. در فیلدهای فرم از دستورالعمل [(ngModel)] برای بایند کردن پراپرتی های model تعریف شده در کامپوننت اصلی استفاده شده است. برای اعتبار سنجی مقادیر فیلدها از صفات required، minlength و email استفاده شده است که مقادیر آن ها توسط توابع موجود فریم ورک انگولار بررسی می شوند.

رویداد submit فرم با استفاده از دستورالعمل (ngSubmit) به هندلر onSubmit() موجود در کامپوننت app بایند شده است. پیام های مربوط به اعتبار سنجی هر بار که کاربر فرم را submit کند نمایش داده می شوند. این کار با پراپرتی f.submitted کنترل می شود.

<!-- main app container -->
<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-md-8 offset-md-2">
                <h3>Angular 7 Template-Driven Form Validation</h3>
                <form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" [mustMatch]="['password', 'confirmPassword']" novalidate>
                    <div class="form-group">
                        <label for="firstName">First Name</label>
                        <input type="text" class="form-control" name="firstName" [(ngModel)]="model.firstName" #firstName="ngModel" [ngClass]="{ 'is-invalid': f.submitted && firstName.invalid }" required />
                        <div *ngIf="f.submitted && firstName.invalid" class="invalid-feedback">
                            <div *ngIf="firstName.errors.required">First Name is required</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="lastName">Last Name</label>
                        <input type="text" class="form-control" name="lastName" [(ngModel)]="model.lastName" #lastName="ngModel" [ngClass]="{ 'is-invalid': f.submitted && lastName.invalid }" required />
                        <div *ngIf="f.submitted && lastName.invalid" class="invalid-feedback">
                            <div *ngIf="lastName.errors.required">Last Name is required</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="text" class="form-control" name="email" [(ngModel)]="model.email" #email="ngModel" [ngClass]="{ 'is-invalid': f.submitted && email.invalid }" required email />
                        <div *ngIf="f.submitted && email.invalid" class="invalid-feedback">
                            <div *ngIf="email.errors.required">Email is required</div>
                            <div *ngIf="email.errors.email">Email must be a valid email address</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input type="password" class="form-control" name="password" [(ngModel)]="model.password" #password="ngModel" [ngClass]="{ 'is-invalid': f.submitted && password.invalid }" required minlength="6" />
                        <div *ngIf="f.submitted && password.invalid" class="invalid-feedback">
                            <div *ngIf="password.errors.required">Password is required</div>
                            <div *ngIf="password.errors.minlength">Password must be at least 6 characters</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="confirmPassword">Confirm Password</label>
                        <input type="password" class="form-control" name="confirmPassword" [(ngModel)]="model.confirmPassword" #confirmPassword="ngModel" [ngClass]="{ 'is-invalid': f.submitted && confirmPassword.invalid }" required />
                        <div *ngIf="f.submitted && confirmPassword.invalid" class="invalid-feedback">
                            <div *ngIf="confirmPassword.errors.required">Confirm Password is required</div>
                            <div *ngIf="confirmPassword.errors.mustMatch">Passwords must match</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary">Register</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<h3>Angular 7 Template-Driven Form Validation</h3>

<label for="firstName">First Name</label>

<div *ngIf="firstName.errors.required">First Name is required</div>

</div>

<div *ngIf="lastName.errors.required">Last Name is required</div>

</div>

<label for="email">Email</label>

<div *ngIf="email.errors.required">Email is required</div>

<div *ngIf="email.errors.email">Email must be a valid email address</div>

</div>

<label for="password">Password</label>

<div *ngIf="password.errors.required">Password is required</div>

<div *ngIf="password.errors.minlength">Password must be at least 6 characters</div>

</div>

<label for="confirmPassword">Confirm Password</label>

<div *ngIf="confirmPassword.errors.required">Confirm Password is required</div>

<div *ngIf="confirmPassword.errors.mustMatch">Passwords must match</div>

</div>

<button class="btn btn-primary">Register</button>

</div>

</form>

</div>

Validator سفارشی Must Match

در این مثال ما یک validator سفارشی برای بررسی مقدار دو فیلد password و confirm password ایجاد کرده ایم. شما می توانید از این اعتبار سنج برای فیلد هایی مثل email و confirm email نیز استفاده کنید.

import { FormGroup } from '@angular/forms';

// custom validator to check that two fields match
export function MustMatch(controlName: string, matchingControlName: string) {
    return (formGroup: FormGroup) => {
        const control = formGroup.controls[controlName];
        const matchingControl = formGroup.controls[matchingControlName];

        // return null if controls haven't initialised yet
        if (!control || !matchingControl) {
          return null;
        }

        // return null if another validator has already found an error on the matchingControl
        if (matchingControl.errors && !matchingControl.errors.mustMatch) {
            return null;
        }

        // set error on matchingControl if validation fails
        if (control.value !== matchingControl.value) {
            matchingControl.setErrors({ mustMatch: true });
        } else {
            matchingControl.setErrors(null);
        }
    }
}

import { FormGroup } from '@angular/forms';

// custom validator to check that two fields match

export function MustMatch(controlName: string, matchingControlName: string) {

return (formGroup: FormGroup) => {

const control = formGroup.controls[controlName];

const matchingControl = formGroup.controls[matchingControlName];

// return null if controls haven't initialised yet

if (!control || !matchingControl) {

return null;

}

// return null if another validator has already found an error on the matchingControl

if (matchingControl.errors && !matchingControl.errors.mustMatch) {

return null;

}

// set error on matchingControl if validation fails

if (control.value !== matchingControl.value) {

matchingControl.setErrors({ mustMatch: true });

} else {

matchingControl.setErrors(null);

}

دستورالعمل سفارشی Must Match

دستورالعمل سفارشی [mustMatch] اعتبار سنج سفارشی MustMatch را wrap می کند بنابراین می توانیم آن را به فرم وصل کنیم. دستورالعمل سفارشی زمانی لازم است که از روش template-driven استفاده می کنیم. زیرا در این روش برخلاف روش reactive froms به FormGroup دسترسی مستقیم نداریم. Directive سفارشی اینترفیس Validator را پیاده‌سازی کرده و خود را با NG_VALIDATORS ثبت می کند تا انگولار آن را به عنوان یک دستورالعمل اعتبار سنج سفارشی بشناسد.

import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, ValidationErrors, FormGroup } from '@angular/forms';

import { MustMatch } from './must-match.validator';

@Directive({
    selector: '[mustMatch]',
    providers: [{ provide: NG_VALIDATORS, useExisting: MustMatchDirective, multi: true }]
})
export class MustMatchDirective implements Validator {
    @Input('mustMatch') mustMatch: string[] = [];

    validate(formGroup: FormGroup): ValidationErrors {
        return MustMatch(this.mustMatch[0], this.mustMatch[1])(formGroup);
    }
}

import { Directive, Input } from '@angular/core';

import { NG_VALIDATORS, Validator, ValidationErrors, FormGroup } from '@angular/forms';

import { MustMatch } from './must-match.validator';

@Directive({

selector: '[mustMatch]',

providers: [{ provide: NG_VALIDATORS, useExisting: MustMatchDirective, multi: true }]

})

export class MustMatchDirective implements Validator {

@Input('mustMatch') mustMatch: string[] = [];

validate(formGroup: FormGroup): ValidationErrors {

return MustMatch(this.mustMatch[0], this.mustMatch[1])(formGroup);

}

فایل App Module

در این فایل به جز موارد معمول، باید FormsModule را از ‘@angular/forms’ وارد کرده و به بخش imports اضافه کنیم. همچنین باید directive مربوط به validator سفارشی را از ‘./_helpers/must-match.directive’ وارد کرده و به بخش declarations اضافه کنیم.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { MustMatchDirective } from './_helpers/must-match.directive'

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent,
    MustMatchDirective
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }