ReactiveForm的自定义验证器

来源：动视网责编：小采时间：2020-11-27 19:58:55

ReactiveForm的自定义验证器

ReactiveForm的自定义验证器:这次给大家带来Reactive Form的自定义验证器，使用Reactive Form的自定义验证器的注意事项有哪些，下面就是实战案例，一起来看一下。本文将介绍Angular（Angular2+）中Reactive Form的有关内容，包括：Reactive Form创建方法如何使用验证自定义

推荐度：

点击下载本文 文档为doc格式

导读ReactiveForm的自定义验证器:这次给大家带来Reactive Form的自定义验证器，使用Reactive Form的自定义验证器的注意事项有哪些，下面就是实战案例，一起来看一下。本文将介绍Angular（Angular2+）中Reactive Form的有关内容，包括：Reactive Form创建方法如何使用验证自定义

这次给大家带来Reactive Form的自定义验证器，使用Reactive Form的自定义验证器的注意事项有哪些，下面就是实战案例，一起来看一下。

本文将介绍Angular（Angular2+）中Reactive Form的有关内容，包括：

Reactive Form创建方法

如何使用验证

自定义验证器

下面开始进入正文！

Reactive Form创建方法

首先我们需要使用FormBuilder创建一个FormGroup，就像这样：

registerForm: FormGroup;
constructor(
 private fb: FormBuilder,
) {}
ngOnInit() {
 this.registerForm = this.fb.group({
 firstName: [''],
 lastName: [''],
 })
}

上面的firstName和lastName是由你自己取的，分别表示一个表单控件名称。
然后HTML页面就像这样：

<form [formGroup]="registerForm" (ngSubmit)="handleSubmit(registerForm)">
 <label>FirstName:</label>
 <input formControlName="firstName">
 <label>LastName:</label>
 <input formControlName="lastName">
 <button type="submit">Submit</button>
</form>

这样就创建了一个非常简单的表单！

如何使用验证

表单的输入项经常是要进行验证的，那该怎么验证呢？
其实很简单，Angular已经为我们写好了一些常用的验证器，就像这样使用就可以了：

ngOnInit() {
 this.registerForm = this.fb.group({
 firstName: ['', Validators.required],
 lastName: ['', Validators.pattern('[A-Za-z0-9]*')],
 })
}

可以使用“必要”验证器，也可以使用正则，你只需传入一个正则表达式就可以了。除此之外，还有minLength和maxLength等。
如果一个控件需要多个验证器，可以把它们放在一个数组里面：

lastName: ['', [Validators.pattern('[A-Za-z0-9]*'), Validators.required]]

如果你希望在输入时得到一些提示，可以这样写你的HTML：

<form [formGroup]="registerForm" (ngSubmit)="handleSubmit(registerForm)">
 <label>FirstName:</label>
 <input formControlName="firstName">
 <p *ngIf="registerForm.controls.firstName.touched && registerForm.controls.firstName.invalid">
 This field is required!
 </p>
 <label>LastName:</label>
 <input formControlName="lastName">
 <p *ngIf="registerForm.controls.lastName.hasError('pattern')">
 Invalid input!
 </p>
 <button type="submit" [disabled]="!registerForm.valid">Submit</button>
</form>

第一个控件，在你“touch”过又为空的情况下会给出提示；第二个控件，在输入不符合正则表达式规则的情况下给出提示，hasError方法还可以传入required、minLength等参数，分别对应不同的验证器；最后，在输入还未符合规则的时候，Submit按钮是处于禁用状态的。

Angular提供的几个验证器在实际项目中往往是不够用的，因此我们需要自定义验证器，以满足我们的业务需求！

自定义验证器

验证器其实就是一个有着return的方法！
现在我们来写一个验证器，验证一个网址输入框的值是否符合规则：

export function validateUrl(control: AbstractControl){
 if(control.value){
 if(!control.value.startsWith('www') || !control.value.includes('.io')){
 return {
 inValidUrl: true
 }
 }
 }
 return null;
}

我们测试输入值是否以“www”开头，并且包含“.io”。然后使用方法跟Angular提供的验证器一样：

this.registerForm = this.fb.group({
 firstName: ['', Validators.required],
 lastName: ['', [Validators.pattern('[A-Za-z0-9]*'), Validators.required]],
 website: ['', validateUrl], // <---
})

然后，你可以这样写你的HTML，以便适当的时候得到提示：

<label>Website:</label>
 <input formControlName="website">
 <p *ngIf="registerForm.controls.website.invalid">
 Url must starts with www and includes .io
 </p>

OK，今天的内容就到这里。

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！