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 相关文章推荐
动态加载iframe
Jun 16 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
在Express中提供静态文件的实现方法
Oct 17 Javascript
JS window对象简单操作完整示例
Jan 14 Javascript
javascript贪吃蛇游戏设计与实现
Sep 17 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随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
详解php命令注入攻击
2019/04/06 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
AngularJS控制器之间的通信方式详解
2016/11/03 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
Python 初始化多维数组代码
2008/09/06 Python
python批量导出导入MySQL用户的方法
2013/11/15 Python
python time模块用法实例详解
2014/09/11 Python
python获取本机mac地址和ip地址的方法
2015/04/29 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
试解释COMMIT操作和ROLLBACK操作的语义
2014/07/25 面试题
大学开学计划书
2014/04/30 职场文书
学术诚信承诺书
2014/05/26 职场文书
销售业务员岗位职责
2015/02/13 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
担保贷款承诺书
2015/04/30 职场文书
创业计划书之寿司
2019/07/19 职场文书