這次帶給大家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中文網其他相關文章!