angular 响应式表单（登录实例）

一、表单验证

1.　只有一个验证规则；

this.myGroup = this.fb.group({
      email:['hurong.cen@qq.com',Validators.required],
      password:['']
    })

2. 有多个验证的时候；

email:['hurong.cen@qq.com',Validators.compose([Validators.required,Validators.email])],

3. 有多个验证的时候，并且有自定义验证规则的；

 1   ngOnInit() {
 2     this.myGroup = this.fb.group({
 3       email:['hurong.cen@qq.com',Validators.compose([Validators.required,Validators.email,this.validatorEamil])],
 4       password:['']
 5     })
 6   }11 
12   validatorEamil(c:FormControl):{[key:string]:any}{
13     if(!c.value){
14       return null;
15     }
16     const pattern = /^wang+/;
17     if(pattern.test(c.value)){
18       return null;
19     }
20     return {
21       emialNotValid:'The email must start with wang'
22     };
23   }

 

posted @ 2018-12-28 16:53  芙蓉0504  阅读(644)  评论(0)  编辑  收藏  举报