上一篇 总结了模版驱动表单的基本用法,示例中的校验使用的是原生HTML5的校验方式,本文补上自定义校验的部分。

  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">&emsp;新密码 :</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使用总结 ---以密码确认为例实现模版驱动表单的自定义校验的更多相关文章

  1. Angular使用总结 --- 模版驱动表单

    表单的重要性就不多说了,Angular支持表单的双向数据绑定,校验,状态管理等,总结下. 获取用户输入 <div class="container-fluid login-page&q ...

  2. SNF快速开发平台MVC-各种级联绑定方式,演示样例程序(包含表单和表格控件)

    做了这么多项目,经常会使用到级联.联动的情况. 如:省.市.县.区.一级分类.二级分类.三级分类.仓库.货位. 方式:有表单需要做级联的,还是表格行上需要做级联操作的. 实现:实现方法也有很多种方式. ...

  3. Angular 表单(二) - 模板驱动表单

    import { Component, OnInit } from '@angular/core'; import { Hero} from '../hero'; @Component({ selec ...

  4. Angular使用总结 --- 模型驱动表单

    模型驱动表单 之前有篇博文总结了 模版驱动表单 , 以及 模版驱动表单的自定义校验 , 本篇总结下模型驱动表单. 与模版驱动表单是不同的编程思路,偏向于数据模型.先在组件中建立表单控件的对象树,再绑定 ...

  5. angular表单的使用实例

    原文 https://www.jianshu.com/p/da1fd5396798 大纲 1.模板驱动表单的创建 2.响应式表单的创建 3.模板驱动型表单的自定义指令 4.响应式表单的自定义指令 5. ...

  6. angular表单知识点

    原文 https://www.jianshu.com/p/c772d143e1fc 大纲 1.对表单的理解 2.模板驱动表单(Template Driven Forms) 3.响应式表单(Reacti ...

  7. Angular 表单验证类库 ngx-validator 1.0 正式发布

    背景介绍 之前写了一篇 <如何优雅的使用 Angular 表单验证>,结尾处介绍了统一验证反馈的类库  ngx-validator  ,由于这段时间一直在新模块做微前端以及相关业务组件库, ...

  8. Angular 2 + 折腾记 :(7) 初步了解表单:模板驱动及数据驱动及脱坑要点

    前言 表单在整个系统中的作用相当重要,这里主要扯下响应表单的实现方式. 首先须要操作表单的模块引入这两个模块. import { FormsModule, ReactiveFormsModule } ...

  9. form表单的密码是否一致校验功能

    这是form类表单,自定义的form表单,需要重写钩子函数 """ forms类表单 """ # 校验密码是否一致 from django. ...

随机推荐

  1. Java 截取中英文混合字符串

    题目: 编写一个截取字符串的函数,输入为一个字符串和字节数,输出为按字节截取的字符串. 但是要保证汉字不被截半个,如"我ABC"4,应该截为"我AB",输入&q ...

  2. gcc学习(一)[第二版]

    gcc简介 1. gcc是GNU Compiler Collection的缩写.最初是作为C语言的编译器(GNU C  Compiler),作者为Richard Stallman,是GNU项目的奠基者 ...

  3. 关于C++“加、减机制”的整理

    今天上C++的课,杨老师提到C++继承是“加机制”的,而没有像人类进化一样采取的是“减机制”,这样会导致代码的膨胀和冗余.回来后,特地查阅了一下资料,发现这方面的文章很少. 下边的资料摘自网上及杨老师 ...

  4. Linux中find的使用(转)

    本文转自:迷途花开 另一值得参考的是吴秦先生的博文linux中强大且常用命令:find.grep. find命令用于查找文件和目录,任何位于参数之前的字符串都将被视为欲查找的目录. find 可以指定 ...

  5. Android系统之Broadcom GPS 移植

    1.      内核部分的移植: 内核部分的移植基本上就是对芯片上下电,建立数据结构体,打通GPS通信的串口通道,以及建立文件设备结点供上层调用.所建立的文件结点是针对Power_enable和Res ...

  6. CMake添加-D_DEBUG宏

    Linux下Debug版不会自动添加 _DEBUG宏,只有NDEBUG宏可用. cmake ../src _DCMAKE_BUILD_TYPE=Debug -D_DEBUG 会报错: -D_DEBUG ...

  7. Linux下进程通信方式(简要概述)

    http://blog.sina.com.cn/s/blog_65c209580100u0ee.html (1)管道(Pipe):管道可用于具有亲缘关系进程间的通信,允许一个进程和另一个与它有共同祖先 ...

  8. Android开源经典项目

    目前包括: Android开源项目第一篇--个性化控件(View)篇   包括ListView.ActionBar.Menu.ViewPager.Gallery.GridView.ImageView. ...

  9. IIS部署asp.net mvc网站

    iis配置简单的ASP.NET MVC网站编译器:VS 2013本地IIS:IIS 7操作系统:win 7MVC版本:ASP.NET MVC4sql server版本: 2008 r2 打开VS 20 ...

  10. 闫燕飞:Kafka的高性能揭秘及优化

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文首发在云+社区,未经许可,不得转载. 大家下午好,我是来自腾讯云基础架构部ckafka团队的高级工程师闫燕飞.今天在这里首先为大家先分享 ...