angular4 实现比较密码的表单校验

如今有这样一个场景：

两个表单控件的值须要比较，而后这个比较若是没有达到预期效果须要报错。

但无论是响应式表单仍是模板驱动式表单，都只提供基础的required/min/max等错误验证，因此只能自定义校验规则

但这个自定义校验规则没法直接添加到表单控件的errors属性里

若是是响应式表单，能够使用自定义属性指令+NG_VALIDATORS作

@Directive({
 selector:'confirmPwd',
 providers:[{
    provide:NG_VALIDATORS,
    useExisting:ConfirmPwdDirective,
    multi:true
 }]
})

export class confirmPwdDirective implements Validator{
 @Input('confirmPwd')  pwd:string   //输入属性
 constractor(){}
 validator(control:AbstractControl):{[key:string]:any}{
    return this.pwd?confirmPwdValidator(this.pwd):null;
 }
}

export function confirmPwdValidator(pwd:string):ValidatorFn{
  return (control:AbstractControl):{[key:string]:any}=>{
    if(!control.value) return {'required':true}
    return control.value!==pwd?{'confirmPassword':true}:null
 }

 

<input  [(ngModel)]='inputPwd.new' #new='ngModel'   />
<input  [(ngModel)]='inputPwd.confirm' #confirm='ngModel' [confirmPwd]='new.value'/>

<div class="error-text" *ngIf="confirm.errors?.confirmPassword"> 密码输入不一致</div>

 

若是是模板驱动式表单，能够使用组件+NG_VALUE_ACCESSOR作

@omponent{{
 selector:'nw-input',
 templateUrl:'',
 styleUrls:'',
 providers:[{
    provider:NG_VALUE_ACCESSOR,
    useExisting:forwardRef(()=>NwInputComponent)
 }]
}}

export class NwInputComponent implements ControlValueAccessor{
  @Input() hasErrors:any;

}

 

<form [formGroup]="thatForm">
  <nw-input formControlName="pwd" #pwdComp [hasErrors]=formGuard.msgs.pwd.errors></nw-input>
  <nw-input formControlName="confirmPwd" #confirmPwdComp [hasErrors]=formGuard.msgs.confirmPwd.errors></nw-input>
</form>

 

@Component({
  selector:'product-new',
  templateUrl:'',
  styleUrls:''
})

export class productNewComponent implements OnInit{
   thatForm:FormGroup;
   formGuard:ProductNewValidation=new ProductNewValidation();

   @ViewChild('pwdComp')
   pwdComp:NwInputComponent;

   @ViewChild('confirmPwdComp') confirmPwdComp:NwInputComponent;

   constructor(){}
 
    ngOninit(){
      this.thatForm=this.formBuilder.group({
        pwd:['',Validators,required],
        confirmPwd:['',[Validators.required,MatchValidators.match_pwd('pwd')]]
      })
   }

}

 

export class ProductNewValidation extend FormValidation{
  constructor(){ super()}
  msgs={ 
      pwd:{
         errors:'',
         messages:{
           required:'请输入密码'
        }
      },
       confirmPwd:{
         errors:'',
         messages:{
           required:'请再次输入密码',
           match:'两次密码不一致'
        }
      }
  }
}        

 

export class MatchValidators{
 static match_pwd(targetField:string):ValidatorFn{
      return (control: AbstractControl): { [key: string]: any } => {
          let _form=control.parent;
          if(_form){
                let targetControl:AbstractControl=_form.control[targetField];
                if(targetControl.value && control.value!=taegetControl.value){ 
                     return {match:true}
                }
          }
         return {};       
     }
  }
}