Angular：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], // <---
})

而后，若是你但愿在输入不符合validateUrl验证器规则时获得提示，你能够这样写你的HTML：

<label>Website:</label>
  <input formControlName="website">
    <p *ngIf="registerForm.controls.website.hasError('inValidUrl')">  //<---
    Url must starts with www and includes .io
  </p>

hasError方法的参数就是validateUrl验证器返回对象的key。 OK，今天的内容就到这里。