位置: 编程技术 - 正文
Angular实现表单验证功能(angular form表单)
编辑：rootadmin推荐整理分享Angular实现表单验证功能(angular form表单)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:angularjs表格,angularjs表格,angular动态生成表单,angular表格,angular实例,angularjs表格,angular自定义表单验证,angular form表单,内容如对您有帮助，希望把文章链接给更多的朋友！
Angular表单验证分为两种验证：1.内置验证（required，minlength等）；2.自定义验证（正则表达式）。
接下来我们用一个注册账号的demo来看一下这两种验证是如何实现的。
项目界面
一、内置验证
其中账户名有required验证和最短长度验证，其他两个只有required验证
1.项目目录
----------app.component.ts
----------app.component.html
----------app.component.css
----------app.module.ts
2.项目代码
app.module.ts
app.component.ts
简单来说，在使用验证表单的时候，大致分为四步：
（1）导入相关模块FormGroup, FormControl, Validators；
（2）声明表单验证变量From:FromGroup；
（3）定义验证规则；
（4）通过它所属的控件组（FormGroup）的get方法来访问表单控件
app.component.html
app.component.css
3.项目效果
二、自定义验证
自定义表单验证，需要创建自定义验证器，我们接下来更改邮箱的验证，将其改为有格式的验证，而不是单纯的存在验证，首先我们来看一下项目目录的更改
1.项目目录
----------app.component.ts
----------app.component.html
----------app.component.css
----------app.module.ts
----------emailAuthentication.ts
2.项目代码
app.module.ts
注册自定义验证器EmailValidatorDirective
emailAuthentication.ts
app.component.ts
app.component.html
在最后确认的时候，我们设置一下按钮的disabled属性，在表单验证不通过的时候，确认按钮是点击不了的，显示不可点击状态。[disabled]="Form.invalid"。
3.项目效果
标签: angular form表单
本文链接地址:https://www.jiuchutong.com/biancheng/377378.html 转载请保留说明！下一篇：vue+vue-validator 表单验证功能的实现代码
