原文出处:https://www.jb51.net/article/114488.htm (原文更新阅读)
概念请参考:Angular2 自定义validators
注意:
如果在ionic中使用时请在constructor中对buildForm进行初始化
constructor(public navCtrl: NavController, public navParams: NavParams, private fb: FormBuilder) {
// 初始化时构建表单
this.buildForm();
}
本篇文章主要介绍了强大的 Angular 表单验证功能详细介绍,使用 Angular 的内置表单校验能够完成绝大多数的业务场景的校验需求,有兴趣的可以了解一下
Angular 支持非常强大的内置表单验证,maxlength、minlength、required 以及 pattern。使用 Angular 的内置表单校验能够完成绝大多数的业务场景的校验需求,但有时我们还需要实现更为复杂的表单校验功能,这时可以使用 Angular 提供的表单自定义校验(Custom Validator)。下面,我们就来了解一下如何使用 Angular 的自定义表单校验
效果图:
1、首先,来创建我们的注册组件(register),并在模版中显示一个简单的表单
1 2 3 4 5 6
扫描二维码关注公众号,回复:
2713827 查看本文章
7 8 9 10 |
|
为了使表单看上去能够漂亮一些,在 index.html 中引入 bootstrap 样式文件:
复制代码 代码如下:
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
2、接下来确定我们的验证需求:
我们希望用户名只能包含数字、字母和下划线,且不能以下划线开头
首先为 form 标签添加 formGroup 指令:
1 |
|
并且为 input 标签添加 formControlName 指令:
复制代码 代码如下:
< input formControlName="username" type="text" id="username" class="form-control" >
3、在代码中定义验证规则:
从内置表单模块中导入以下类:
1 |
|
其中:
1. formBuilder 用来构建表单数据
2. formGroup 表示表单类型
3. Validators 包含了表单内置的验证规则,如: Validators.required
定义表单属性
registerForm: FormGroup;
定义表单验证不通过时每一项显示的错误消息(目前我们只有 username )
1 2 3 |
|
为每一项验证规则定义验证失败时的说明文字(表单控件可能有多条验证规则,由不通过的验证说明构成一条错误消息)
1 2 3 4 5 6 7 |
|
在构造函数中添加 fb 属性用来构建表单
1 |
|
添加构建表单的方法
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
接下来我们添加一个方法用来更新错误信息
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
下面只需要在表单构建结束后初始化错误消息,并且在每次表单数据更改时更新错误消息就可以了
在 buildForm 方法中添加如下代码
1 2 3 4 5 6 |
|
此时,我们已经很好的控制了错误信息,下面只需要在表单模版中添加错误信息的显示就可以了
在 input 标签下方添加如下代码:
1 2 |
|
添加如下代码到表单模版的 css 中:
1 2 3 4 5 6 7 8 9 |
|
现在我们就可以尝试运行了,在代码不报错的情况下已经能够看到非常好的效果了
如果代码报错或没有出现想象中的效果则可以参照本文结尾的完整代码进行修改
4、虽然我们已经搭建了整个布局,但是还没有实现我们的最终目的:实现自定义的表单验证
接下来我们创建一个正则验证器,新建文件 validate-register.ts :
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
下面我们在代码中导入此函数:
1 |
|
修改 validationMessage 属性为:
1 2 3 4 5 6 7 8 9 10 |
|
修改 buildForm 方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
OK ! 大功告成了,赶紧运行代码尝试一下吧,我们可以随时添加各种验证规则,只需要修改 validationMessage 属性和 buildForm 方法即可!
如果添加多个表单控件的话还需要修改 formErrors,例如添加 password 控件则修改 formErrors 为
1 2 3 4 |
|
大家可自行尝试一下!
完整代码:
register.component.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
register.component.css:
1 2 3 4 5 6 7 8 9 |
|
register.component.ts:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
|
validate-register.ts:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。