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

最新推荐文章于 2021-01-18 08:11:05 发布

转载最新推荐文章于 2021-01-18 08:11:05 发布 · 264 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hibiscus-ben/p/10185910.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用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   }