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')]]
    })
  }
}