未加星标

Implement Shared Custom Validator Directive in Angular

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏
Introduction

In this post, we are going to see how to create a custom validator directive in Angular 5 . We have already seen how to do validation in our previous posts, and we have not done any validations for comparing the password and confirm the password, remember? Here we are going to look into that. At the end of this article, you will get to know how to create a new shared directive according to the requirements of your app . This post is a continuation of the Developing an Angular 5 App series. If you haven't gone through the previous posts yet, I strongly recommend you to do that. You can find the links to the previous posts below. I hope you will like this article.

Developing an Angular 5 App Series

These are the previous posts in this series. Please go ahead and have a look.

What Is New and How to Set Up our First Angular 5 Application Angular 5 Basic Demo Project Overview Generating Your First Components And Modules in Angular 5 App Implement Validations in Angular 5 App Validation Using Template Driven Forms in Angular 5

You can always clone or download the source code here .

Background

Validations have a vital role in all application no matter in what language it is being developed. And since it is an essential part, there are many ways to achieve it. If we create a custom shared directive for creating a compare validator, it would be a great piece of code, which can be reused.

Using the Code

It is recommended to clone the project from GitHub so that you can try everything on your own. Let's go ahead and write some code now.

Creating a Custom Directive

Let's just create a new directive in a shared folder and name it equal.validator.directive.ts . Now open that file and start writing the code. Let's import some of the core components first.

import { Validator, AbstractControl, NG_VALIDATORS } from "@angular/forms"; import { Directive, Input } from "@angular/core";

Now Let's define our class and @Directive .

import { Validator, AbstractControl, NG_VALIDATORS } from "@angular/forms"; import { Directive, Input } from "@angular/core"; @Directive({ selector: "[appEqualValidator]", providers: [{ provide: NG_VALIDATORS, useExisting: EqualValidatorDirective, multi: true }] }) export class EqualValidatorDirective implements Validator { validate(c: AbstractControl): { [key: string]: any; } { throw new Error("Method not implemented."); } registerOnValidatorChange?(fn: () => void): void { throw new Error("Method not implemented."); } }

As you can see, we are actually inheriting our new class EqualValidatorDirective from Validator . Now we need to change the implementations of the method inside it. We should also add our new directive tp tje app.module.ts file.

import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule} from '@angular/platform-browser/animations' import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { MatButtonModule, MatCardModule, MatInputModule, MatSnackBarModule, MatToolbarModule } from '@angular/material'; import { FormsModule, ReactiveFormsModule } from '@angular/forms' import { EqualValidatorDirective } from './shared/equal.validator.directive'; import { AppComponent } from './app.component'; import { HomeComponent } from './home/home.component'; import { NavComponent } from './nav/nav.component'; import { RegistrationComponent } from './registration/registration.component'; import { LoginComponent } from './login/login.component'; import { AuthService } from './auth.service'; import { AuthGuard } from './auth.guard'; const myRoots: Routes = [ { path: '', component: HomeComponent, pathMatch: 'full' , canActivate: [AuthGuard]}, { path: 'register', component: RegistrationComponent }, { path: 'login', component: LoginComponent}, { path: 'home', component: HomeComponent, canActivate: [AuthGuard]} ]; @NgModule({ declarations: [ AppComponent, HomeComponent, NavComponent, RegistrationComponent, LoginComponent, EqualValidatorDirective ], imports: [ BrowserModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule, MatButtonModule, MatCardModule, MatInputModule, MatSnackBarModule, MatToolbarModule, RouterModule.forRoot(myRoots) ], providers: [AuthService, AuthGuard], bootstrap: [AppComponent] }) export class AppModule { }

Before we do that, we should add our new custom directive selector in our confirm password field, because that's where we are going to use our validator. So we are going to change our markup forthe confirm password field as shown below.

<div class="form-group" [class.has-error]="confirmPasswordControl.invalid && confirmPasswordControl.touched" [class.has-success]="confirmPasswordControl.valid"> <input type="password" required class="form-control" name="confirmPassword" appEqualValidator="password" placeholder="Confirm Password" [(ngModel)]="confirmPassword" #confirmPasswordControl="ngModel"> <span class="help-block" *ngIf="confirmPasswordControl.errors?.required && confirmPasswordControl.touched"> Confirm password is required </span> </div>

As you can see, we are using the selector appEqualValidator="password" in our confirm password field. Please do check my previous posts if you are not sure how to implement other validations like email and required .

Now let's go back to our custom directive and make some changes.

export class EqualValidatorDirective implements Validator { @Input() appEqualValidator: string; validate(c: AbstractControl): { [key: string]: any; } { const controlToCompare = c.parent.get(this.appEqualValidator) if (controlToCompare && controlToCompare.value == c.value)return { "equal": true }; return { "notEqual": true } } registerOnValidatorChange?(fn: () => void): void { throw new Error("Method not implemented."); } }

Here, we get our confirmPassword control in the absolute control "c", and in the next line, we are just finding our password control by getting the parent element of confirmPassword . Once we get that, we can easily perform the comparison easily right? So, if it matches we return {"equal": true}; or else {"notEqual": true}.

Introduce New Span for Custom Message

Now we have a custom validator which compares two values, and the only thing which pending is to create a span for showing our new message in the UI. Let's change our markup now.

<div class="form-group" [class.has-error]="confirmPasswordContr

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:Implement Shared Custom Validator Directive in Angular
本站链接:https://www.codesec.net/view/611463.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(83)