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，今天的內容就到這裏。