这次给大家带来Reactive Form的自定义验证器,使用Reactive Form的自定义验证器的注意事项有哪些,下面就是实战案例,一起来看一下。
本文将介绍Angular(Angular2+)中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,今天的内容就到这里。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是Reactive Form的自定义验证器的详细内容。更多信息请关注PHP中文网其他相关文章!