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網其它相關文章！