Angular实现模版驱动表单的自定义校验功能(密码确认为例)


Posted in Javascript onMay 17, 2018

HTML5原生的表单校验属性(必填,长度限制,取值间隔,正则表达式等等)可以满足普通的校验需求,但是有些场景必须用到自定义校验,比如注册时的密码确认,有比对关系的时间/数值选择, 需要到请求到服务端取值验证等等···这里以密码确认为例进行说明。

指令开发

表单的验证状态是通过 formContro l的 errors 属性反馈出来的,所以基本的思路肯定就是需要添加校验规则,然后将验证结果添加到formControl实例的errors属性中。那么问题来了,模版驱动表单的控制都是在HTML模版中完成的,无法直接接触到 formControl实例。这个时候就需要使用指令了,将检验规则进行包装。Angular提供了 验证器供应商 NG_VALIDATORS ,用于处理表单自定义校验。先创建指令。

import { Directive} from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl} from '@angular/forms';
@Directive({
 selector: '[appConfirmpsw]',
 providers: [{
  provide : NG_VALIDATORS,
  useExisting : ConfirmpswDirective,
  multi: true
 }]
})
export class ConfirmpswDirective implements Validator {
 constructor() {
  }
 validate(control: AbstractControl): {[key: string]: any} {
   //检验规则
 }
}

1、为指令指定供应商  NG_VALIDATORS , 和别名类 ConfirmpswDirective , 及 multi 为true(可以用同一个token,注册不同的 provide)。因为是在 NG_VALIDATORS 提供商中注册的指令,所以才能被Angular的验证流程识别,需要注意的是要用useExisting来注册,这样就不会创建一个新的实例。

2、用 Validator接口来约束 自定义的指令,这是Angular提供的验证器的类 。有validate属性,会传入表单的formControl,返回 ValidationErrors 对象。

现在指令结构完成,开始进行校验部分。首先需要传入已输入的密码,所以增加@input,再指定校验规则,判断绑定表单的值和传入的已输入值是否相同

@Input('appConfirmpsw') confirmpsw: string;

为了避免使用指令时,还需要额外传入confirmpsw属性 ( <input type="password" appConfirmpsw  [confirmpsw]="'xxx'" >),所以我们将 指令名称appConfirmpsw作为confirmpsw的别名,这样传值会比较方便,简化为  <input type="password" [appConfirmpsw] = "'xxx'">

这里专门写一个检验函数,用来比对值和返回结果。记得在指令的validate中调用一下

export function comfirmPswValidator(_confirmpsw: string): ValidatorFn { //传入已输入的密码值 , 返回一个ValidatorFn
 return (control: AbstractControl): {[key: string]: any} => { //传入绑定表单的formControl
  if ( !control.value ) { //如果绑定未输入值,则返回 required错误
   return { 'required' : true };
  }
//如果两次输入的值不相同,则返回confirmpsw的错误
  return control.value !== _confirmpsw ? {'confirmpsw' : {value: true}} : null;
 };
}

完整指令如下:

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

@Directive({
 selector: '[appConfirmpsw]',
 providers: [{
  provide : NG_VALIDATORS,
  useExisting : ConfirmpswDirective,
  multi: true
 }]
})
export class ConfirmpswDirective implements Validator {

 @Input('appConfirmpsw') confirmpsw: string;
 constructor() {

  }
 validate(control: AbstractControl): {[key: string]: any} {
  console.log(this.confirmpsw);
  return this.confirmpsw ? comfirmPswValidator(this.confirmpsw)(control) : null;
 }
}

export function comfirmPswValidator(_confirmpsw: string): ValidatorFn {
 return (control: AbstractControl): {[key: string]: any} => {
  if ( !control.value ) {
   return { 'required' : true };
  }
  return control.value !== _confirmpsw ? {'confirmpsw' : {value: true}} : null;
 };
}

 使用

测试一下指令的效果吧

<div class="input-group">
   <label class="group-label" for="psw-new"> 新密码 :</label>
   <input class="group-input" [(ngModel)]="inputpsw.new" #new="ngModel" type="password" name="psw" id="psw-new" required>
  </div>
  <div class="input-group input-error" *ngIf="new.touched&&new.invalid">
   <div class="group-error-content" *ngIf="new.errors?.required">确认密码为必填项!</div>
  </div>
  <div class="input-group">
   <label class="group-label" for="psw-confirm">确认密码 :</label>
   <input class="group-input" [(ngModel)]="inputpsw.confirm" #confirm="ngModel" type="password" name="confirm" id="psw-confirm"
   [appConfirmpsw] = "new.value" required>
  </div>
  <div class="input-group input-error" *ngIf="confirm.touched&&confirm.invalid">
   <div class="group-error-content" *ngIf="confirm.errors?.required">新密码为必填项!</div>
   <div class="group-error-content" *ngIf="confirm.errors?.confirmpsw">密码输入不一致!</div>
  </div>

传入new表单的值,并通过errors.confirmpsw属性来控制提示语反馈。密码输入不一致,可以正确的校验到

Angular实现模版驱动表单的自定义校验功能(密码确认为例)

确认密码为空时的提示也正确

Angular实现模版驱动表单的自定义校验功能(密码确认为例)

总结

以上所述是小编给大家介绍的Angular实现模版驱动表单的自定义校验功能(密码确认为例),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
DOM 事件流详解
Jan 20 Javascript
js简单倒计时实现代码
Apr 30 Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
VUE长按事件需求详解
Oct 18 Javascript
垃圾回收器的相关知识点总结
May 13 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
JavaScript实现页面中录音功能的方法
Jun 04 Javascript
vue实现学生信息管理系统
May 30 Javascript
javascript数组includes、reduce的基本使用
Jul 02 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 #Javascript
JS 实现分页打印功能
May 16 #Javascript
使用vue-cli导入Element UI组件的方法
May 16 #Javascript
JS 使用 window对象的print方法实现分页打印功能
May 16 #Javascript
Koa2微信公众号开发之消息管理
May 16 #Javascript
js实现鼠标单击Tab表单切换效果
May 16 #Javascript
Koa2微信公众号开发之本地开发调试环境搭建
May 16 #Javascript
You might like
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
(function(){})()的用法与优点
2007/03/11 Javascript
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
js根据日期判断星座的示例代码
2014/01/23 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
angularjs学习笔记之完整的项目结构
2015/09/26 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
vue-axios使用详解
2017/05/10 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
VUE DOM加载后执行自定义事件的方法
2018/09/07 Javascript
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
Python聊天室程序(基础版)
2018/04/01 Python
ipython和python区别详解
2019/06/26 Python
简单了解python的一些位运算技巧
2019/07/13 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
施工班组长岗位职责
2014/01/05 职场文书
护理专业大学生自我推荐信
2014/01/25 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers