这篇文章主要介绍了Angular如何实现Reactive Form表单验证,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
成都创新互联专注于企业全网营销推广、网站重做改版、长安网站定制设计、自适应品牌网站建设、H5建站、商城建设、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为长安等各大城市提供网站开发制作服务。基础知识
内建验证规则
Angular 提供了一些内建的 validators,我们可以在 Template-Driven 或 Reactive 表单中使用它们。
目前 Angular 支持的内建 validators 如下:
required - 设置表单控件值是非空的。
email - 设置表单控件值的格式是 email。
minlength - 设置表单控件值的最小长度。
maxlength - 设置表单控件值的大长度。
pattern - 设置表单控件的值需匹配 pattern 对应的模式。
示例
this.signupForm = this.fb.group({ userName: ['', [Validators.required, Validators.minLength(3)]], email: ['', [Validators.required, Validators.pattern('[a-z0-9._%+_]+@[a-z0-9.-]+')]] });
动态调整验证规则
myControl.setValidators(Validators.required); myControl.setValidators([Validators.required, Validators.maxLength(6)]); myControl.clearValidators(); myControl.updateValueAndValidity();
自定义验证器
function myCustomValidator(c: AbstractControl): {[key: string]: boolean} | null { if(somethingIsWrong) { return { 'myvalidator': true}; } return null; }
自定义验证器 (支持参数)
function myCustomValidator(param: any): ValidatorFn { return (c: AbstractControl): {[key: string]: boolean} | null { if(somethingIsWrong) { return { 'myvalidator': true}; } return null; } }
跨字段验证
emailMatcher
function emailMatcher(c: AbstractControl) { let emailControl = c.get('email'); let confirmControl = c.get('confirmEmail'); if (emailControl.pristine || confirmControl.pristine) { return null; } return emailControl.value === confirmControl.value ? null : { 'match': true }; }
emailGroup
ngOnInit(): void { this.signupForm = this.fb.group({ userName: ['', [Validators.required, Validators.minLength(6)]], emailGroup: this.fb.group({ email: ['', [Validators.required, Validators.email]], confirmEmail: ['', [Validators.required]], }, { validator: emailMatcher }) });
在介绍表单验证前,我们来看一下目前页面的显示效果:
表单验证
表单的内建验证规则,前面章节已经介绍过了,接下来我们来介绍在表单中如何 "动态调整验证规则" 。
动态调整验证规则
为了演示 "动态调整验证规则" 的功能,我新增了两个控件:
radio - 用于让用户设置是否开启手机登录。
tel - 当用户开启手机登录功能,用于让用户输入手机号码。
当用户开启手机登录功能,手机号码对应控件的验证规则,必须是必填且格式为合法的手机号码。当用户不开启手机登录功能时,手机号码对应控件将不是必填的。
新增 radio 控件
开启手机登录
新增 tel 控件
请输入手机号码 手机号码格式不正确
动态调整验证规则功能
ngOnInit(): void { ... this.signupForm.get('enableMobile').valueChanges .subscribe(value => this.checkMobile(value)); } checkMobile(enableMobile: string): void { const mobileControl = this.signupForm.get('mobile'); enableMobile === "1" ? mobileControl.setValidators([Validators.required, Validators.pattern('1(3|4|5|7|8)\\d{9}')]) : mobileControl.clearValidators(); mobileControl.updateValueAndValidity(); }
介绍完如何动态调整验证规则,接下来我们来介绍如何 "自定义验证器"。
自定义验证器
为了演示 "自定义验证器" 的功能,我新增了一个控件:
number - 用于让用户设置是年龄信息。
当让用户手动输入年龄信息时,我们需要设置一个有效的年龄范围,比如 (18 - 120)。此时我们就需要通过自定义验证器来实现上述功能。
新增 number 控件
输入年龄不合法
自定义验证器模板
function myCustomValidator(c: AbstractControl): {[key: string]: boolean} | null { if(somethingIsWrong) { return { 'myvalidator': true}; } return null; }
新增 ageValidator 验证器
function ageValidator(c: AbstractControl): { [key: string]: any } | null { let age = c.value; if (age && (isNaN(age) || age < 20 || age > 120)) { return { 'range': true, min: 20, max: 120 }; } return null; }
使用 ageValidator 验证器
ngOnInit(): void { this.signupForm = this.fb.group({ // ... age: ['', ageValidator] }); }
我们的 ageValidator 自定义验证器,虽然已经实现了。细心的读者应该会发现,在 ageValidator 验证器内部,我们写死了年龄的边界值 (最小值与大值)。理想的情况下,应该能够让用户自行设定边界值。因此接下来,我们来优化一下 ageValidator 验证器。
自定义验证器 (支持参数)
自定义验证器模板 (支持参数)
function myCustomValidator(param: any): ValidatorFn { return (c: AbstractControl): {[key: string]: boolean} | null { if(somethingIsWrong) { return { 'myvalidator': true}; } return null; } }
新增 ageRange 验证器工厂
function ageRange(min: number, max: number): ValidatorFn { return (c: AbstractControl): { [key: string]: any } | null => { let age = c.value; if (age && (isNaN(age) || age < min || age > max)) { return { 'range': true, min: min, max: max }; } return null; } }
使用 ageRange 验证器工厂
ngOnInit(): void { this.signupForm = this.fb.group({ // ... age: ['', ageRange(20, 120)] }); }
介绍完如何自定义验证器,接下来我们来介绍如何实现 "跨字段验证" 的功能。
跨字段验证
在日常生活中,在注册表单中,经常要让用户再次输入同样的字段值,比如登录密码或邮箱地址的值。针对这种场景,我们就需要验证两个控件的输入值是否一致,这时我们就要引入跨字段验证的功能。
为了演示 "跨字段验证" 的功能,我新增了一个控件:
email - 用于让用户确认输入的邮箱地址
新增 email 控件
请输入邮箱地址 两次输入的邮箱地址不一致
新增 emailMatcher
function emailMatcher(c: AbstractControl) { let emailControl = c.get('email'); let confirmControl = c.get('confirmEmail'); if (emailControl.pristine || confirmControl.pristine) { return null; } return emailControl.value === confirmControl.value ? null : { 'match': true }; }
新增 emailGroup
ngOnInit(): void { this.signupForm = this.fb.group({ userName: ['', [Validators.required, Validators.minLength(6)]], emailGroup: this.fb.group({ email: ['', [Validators.required, Validators.email]], confirmEmail: ['', [Validators.required]], }, { validator: emailMatcher }), // ... });
更新模板
请输入邮箱地址 请输入有效的邮箱地址
上面代码中,有以下几个问题需要注意:
Form Group 是可以嵌套使用的。
this.signupForm = this.fb.group({ userName: ['', [Validators.required, Validators.minLength(6)]], emailGroup: this.fb.group({ email: ['', [Validators.required, Validators.email]], confirmEmail: ['', [Validators.required]], }, { validator: emailMatcher })
我们通过 formGroupName="groupName" 语法来绑定内嵌的 Form Group。
邮箱不匹配的信息是存在 emailGroup 对象的 errors 属性中,而不是存在 confirmEmail 对象的 errors 属性中。
两次输入的邮箱地址不一致
我有话说
怎么会监听表单值的变化?
Reactive Form
export class AppComponent { constructor(private fb: FormBuilder) { this.form = fb.group({ name: 'semlinker', age: 31 }); this.form.valueChanges.subscribe(data => { console.log('Form changes', data) }); } }Template-driven Form
模板
组件类
class AppComponent implements AfterViewInit { @ViewChild('myForm') form; ngAfterViewInit() { this.form.control.valueChanges .debounceTime(500) .subscribe(values => this.doSomething(values)); } }感谢你能够认真阅读完这篇文章,希望小编分享的“Angular如何实现Reactive Form表单验证”这篇文章对大家有帮助,同时也希望大家多多支持创新互联建站,关注创新互联网站建设公司行业资讯频道,更多相关知识等着你来学习!
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享文章:Angular如何实现ReactiveForm表单验证-创新互联
URL网址:http://cdkjz.cn/article/dodice.html