zoukankan      html  css  js  c++  java
  • angular4 自定义表单验证Validator

    表单的验证条件有时候满足不了需求就可以自定义验证

    唯一要求返回是ValidatorFn

    export interface ValidatorFn{
     (c:AbstractControl):ValidationErrors | null
    }
    
    export declare type ValidationErrors={
     [key:string]:any
    }

    由上可以发现:

    VilidatorFn的参数是AbstrctControl类型,返回类型是ValidatorErrors类型

    因此在设计自定义表单验证函数时,必须return一个【参数为AbstrctControl类型,而返回结果是ValidatorErrors类型】的函数

    具体实现:

    以下场景是比较两个密码是否一致

    //Compare.validator.ts
    
    export class CompareValidators{
        static match(targetField:string):ValidatorFn{
           return (self:AbstractControl):{[key:string]:any}=>{    //这里严格按照ValidatorFn的声明来
             let _form=self.parent;
             if(_form){
                let targetControl:AbstractControl=_form.controls[targetField];
                if(targetControl.value && self.value!=targetControl.value){   //如果两个值不一致
                      return {match:''}
                }
             }
          }
       }
    }
    //xx.component.ts

    export class xxComponent implements OnInit{ thatForm:FormGroup; ngOnInit(){ this.thatForm=this.formBuilder.group({ password:['',[Validators.required]], confirmPassword:['', [Validators.required,CompareValidators.match('password')]] }) } }

      

  • 相关阅读:
    Java--笔记(4)
    Java--笔记(3)
    Java--笔记(2)
    Java--笔记(1)
    Java--剑指offer(10)
    Java--剑指offer(9)
    网络基础面试常考知识点
    Java--剑指offer(8)
    Keil C51 的printf
    C语言中以十六进制输出字符型变量会出现'ffffff"的问题
  • 原文地址:https://www.cnblogs.com/artimis/p/9020992.html
Copyright © 2011-2022 走看看