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

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

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>

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

时间: 2024-11-06 19:44:12

angular自定义验证器添加入模板驱动表单的相关文章

模板驱动表单(实验部分)

#模板驱动表单验证(template-driven form validation)实现思路 1. 引入 FormsModule 2. 应用 NgForm和ngModel(关联class的属性) 3. 验证 4. 给出提示 5. 提交(Submit) #实现知识点 在login.component.ts中 <form #f="ngForm" class="login-form"> //创建模板引用变量 实现双向数据绑定,template与model cl

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

前言 表单在整个系统中的作用相当重要,这里主要扯下响应表单的实现方式. 首先需要操作表单的模块引入这两个模块: import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 表单控件响应的几种状态 模板驱动表单依赖FormsModule,数据驱动的表单依赖FormsModule,ReactiveFormsModule 一般做表单校验及操作推荐用数据驱动的方式,好维护和理解.. 模板驱动 模板驱动:主要是依赖[(ngModel

thinkphp5.0自定义验证器

虽然我早就会些php基础语法,我套过数据,自己写的控制器层,不是用的api方式,那个公司是为了锻炼我,所以才那样做的,基本上的东西都是用的框架自带的,重来自己没有去封装过这些东西,所以编程思想上,还很欠缺,所以我得先好好模仿一下别人的代码. 问题: 如何自定义验证器类,并且如何使用自定义规则; 不管是验证器,还是拦截器,过滤器,都是要先继承相应的类,只要继承了就是对应的什么验证器,拦截器...了; eg: 1.自定义验证器类 class ValidateCustom extends Valida

Struts2的输入验证(四)-自定义验证器与编程式验证

一.自定义验证器 1.实现步骤: 1)定义一个验证器的类 自定义验证器必须实现 Validator 接口,由于ValidatorSupport 和 FieldValidatorSupport 实现了 Validator 接口,因此可以继承ValidatorSupport 或 FieldValidatorSupport Ⅰ. 若需要普通的验证程序,可以继承 ValidatorSupport 类: Ⅱ. 若需要字段验证程序,可以继承 FieldValidatorSupport 类: Ⅲ. 若验证程序

自定义验证器

自定义验证器必须实现 Validator 接口. ValidatorSupport 和 FieldValidatorSupport 实现了 Validator 接口 --若需要普通的验证程序, 可以继承 ValidatorSupport 类 --若需要字段验证程序, 可以继承 FieldValidatorSupport 类 --若验证程序需要接受一个输入参数, 需要为这个参数增加一个相应的属性 注册验证程序: 自定义验证器需要在类路径里的某个 validators.xml 文件里注册:  验证框

121.自定义验证器

自定义验证器: 有时候我们需要从数据库中提取数据进行验证,这个时候如果还是采用已经定义好的验证器就不能够实现我们想要的功能了.比如我们在注册的时候要验证该手机号或者是邮箱之前是否已经注册过了.如果已经注册过了,就不能够再次进行注册了.这个时候我们就需要对数据库中的手机字段进行验证了.对某个字段进行验证的方式就是,定义一个方法,这个方法的名字的定义规则就是clean_fieldname.如果验证失败,那么就抛出一个错误,如果没有找到相同的手机号就正常情况下返回一个手机号,代表已经通过了验证. (1

tornado的学习——第二章(模板与表单)

链接:http://demo.pythoner.com/itt2zh/ch2.html 来到了第二章:模板与表单 1 # -*- coding:utf-8 -*- 2 3 __author__ = 'roy' 4 5 import os.path 6 7 import tornado.httpserver 8 import tornado.ioloop 9 import tornado.options 10 import tornado.web 11 12 from tornado.option

自定义验证器——用Struts2框架以框架师的思维灵活做好该事情

面对的问题:自定义一个18位身份验证器,编写验证器,在validators.xml文件中进行注册.在验证配置文件中使用? 第一部分:理解Struts2中自带的验证器 第二部分:怎样通过服务器(后台),再次对前台的数据进行验证 第三部分:用Struts2来自定义验证器(问题解决方案) 第一部分:理解Struts2中自带的验证器 Struts2框架中自带的后台服务器验证分为两种:声明式验证和编程式验证 u  声明式验证(重点) ?  对哪个 Action 或 Model 的那个字段进行验证 ?  使

枚举帮助方法,枚举数据注解自定义验证器

枚举辅助类 获取枚举项列表 获取枚举值列表 枚举项包含 枚举值包含 转换枚举 代码如下 1 /// <summary> 2 /// 枚举辅助类 3 /// </summary> 4 public class EnumHelper 5 { 6 7 private static readonly Dictionary<Type, object> EnumCache = new Dictionary<Type, object>(); 8 9 private sta