码迷,mamicode.com
首页 > 其他好文 > 详细

angular自定义验证器添加入模板驱动表单

时间:2019-12-01 13:35:23      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:cte   正则   ring   匹配   姓名   获取   min   name   运算符   

  • 创建自定义验证器的命令

ng generate directive forbidden-name(自定义床啊金验证器的名称)
  • 生成的文件内容

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

@Directive({
  selector: '[appForbiddenName]'
})
export class ForbiddenNameDirective {

  constructor() { }

}
  • 创建一个文件用来放置正则判断的验证器算法。validatot.ts

import { ValidatorFn, AbstractControl } from '@angular/forms';

export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
    // 返回一个具有验证性函数
    return (control: AbstractControl): { [key: string]: any } | null => {
        console.log("control.value=",control.value)
        // control.value控件的值
        const forbidden = nameRe.test(control.value);
        console.log("forbidden=",forbidden)
        // 下面是三目运算符,当forbidden为false的时候,返回null,当forbidden为true的时候,返回{'forbiddenNAme':{value:control.value}}
        return forbidden ? { 'forbiddenName': { value: control.value } } : null;
    };
}
  • 在刚刚生成的自定义验证器中继承并实现一个接口

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

@Directive({
  selector: '[appForbiddenName]',  // 指令作为属性使用
  providers:[{provide:NG_VALIDATORS,useExisting:ForbiddenNameDirective,multi:true}]
})
export class ForbiddenNameDirective implements Validator {
  @Input('appForbiddenName') forbiddenName: string;   // 获取指令值
  // 指令实现接口,也就是说,在调用这条指令的时候,就已经能够启动这个函数
  validate(control: AbstractControl): {[key: string]: any} | null {
    // 键值对:map[key:string]any   {[key: string]: any} | null接收返回值的类型有键值对或者是NULL
    console.log("control:",control)
    console.log("forbiddenName=",this.forbiddenName)
    // 还是三目运算符,this.forbidden为空的时候,不进行匹配
    return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control): null;
  }
  constructor() { }
}

有一个关键的地方是,实现Validator接口之后,要能够给全局的模板都能够实现,要注册。注册的密钥是angular固定提供的一种NG_VALIDATORS。注册的具体语句:

providers:[{provide:NG_VALIDATORS,useExisting:ForbiddenNameDirective,multi:true}]
  • 使用模板自定义的方法

<div>
    <label for="name">姓名:</label>
    <input id="name" class="form-control" ngModel name="name" #name='ngModel' appForbiddenName="bob" required
        minlength="3" style="width: 200px;height: 30px;">
</div>


<!-- forbiddenName="bob" 自定义的 -->

<div *ngIf="name.invalid &&(name.dirty||name.touched)">
    <div *ngIf="name.errors.required">
        Name is required
    </div>
    <div *ngIf="name.errors.minlength">
        Name must be at least 3 characters long.
    </div>
    <!-- appForbiddenName="bob"说明这个控件绑定了一个验证器,{ 'forbiddenName': { value: control.value } } 这个是返回值,有值则出现,无值就不出现 -->
    <div *ngIf="name.errors.forbiddenName">
        Name cannot be Bob.
    </div>
</div>

angular自定义验证器添加入模板驱动表单

标签:cte   正则   ring   匹配   姓名   获取   min   name   运算符   

原文地址:https://www.cnblogs.com/MyUniverse/p/11965581.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!