Angular如何实现ReactiveForm表单验证

这篇文章主要介绍了Angular如何实现Reactive Form表单验证，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联建站始终坚持【策划先行，效果至上】的经营理念，通过多达十年累计超上千家客户的网站建设总结了一套系统有效的网络营销推广解决方案，现已广泛运用于各行各业的客户，其中包括：成都宣传片制作等企业，备受客户赞许。

基础知识

内建验证规则

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 })
});

在介绍表单验证前，我们来看一下目前页面的显示效果：

Angular如何实现Reactive Form表单验证

表单验证

表单的内建验证规则，前面章节已经介绍过了，接下来我们来介绍在表单中如何 "动态调整验证规则" 。

动态调整验证规则

为了演示 "动态调整验证规则" 的功能，我新增了两个控件：

radio - 用于让用户设置是否开启手机登录。
tel - 当用户开启手机登录功能，用于让用户输入手机号码。

当用户开启手机登录功能，手机号码对应控件的验证规则，必须是必填且格式为合法的手机号码。当用户不开启手机登录功能时，手机号码对应控件将不是必填的。

新增 radio 控件

手机号码

请输入手机号码手机号码格式不正确

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(); }

function myCustomValidator(param: any): ValidatorFn { return (c: AbstractControl): {[key: string]: boolean} | null { if(somethingIsWrong) { return { 'myvalidator': true}; } return null; } }

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 }), // ... });

邮箱

请输入邮箱地址请输入有效的邮箱地址

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 })

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) }); } }

class AppComponent implements AfterViewInit { @ViewChild('myForm') form; ngAfterViewInit() { this.form.control.valueChanges .debounceTime(500) .subscribe(values => this.doSomething(values)); } }

大橙子网站建设，新征程启航

Angular如何实现ReactiveForm表单验证

其他资讯