廢話
最近由于項目上需要用到表單驗證，前面直接通過 (input) 事件進行數據檢查，但是不好和自帶的驗證器統一，而且也不正統。于是打算研究一下自定義驗證器，網上類似的文章很多，但是自己在實現的過程中還是遇到了一些問題。于是還是啰嗦的自己寫一篇文章。
正文
這里有官方文檔：驗證響應式表單，用戶的視覺提示，自定義驗證器，這篇文章是根據這些文檔所來（前面兩者就不再贅述比較簡單，也說的比較清楚）
Angular支持的內置validate屬性：
通過表單控件的.valid判斷驗證結果，其結果狀態：
我們經常會遇到如下場景,表單驗證（樣式比較丑陋請忽略）
現在我們要實現 url 驗證，可以直接通過 正則表達式來匹配，這樣的話，直接用 Angular 自帶的驗證器即可，但是如果要兼容大寫呢？我們就不能簡單的直接使用正則來匹配了，我們需要在判斷之前進行一次轉換，把內容全部轉換成小寫，才能進行正則判斷。
這里我們 新建一個 ValidatorBase 類來存放所有的驗證,并且新建一個 靜態方法 urlValidator(input:FormControl) 來對數據進行 url 驗證。具體方法如下：
import { FormControl } from '@angular/forms';
import { Injectable } from '@angular/core'
export class ValidateBase{
public static urlValidator(input: FormControl){
let validateString = "(https?://|WWW|www|ftp://|file://)[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[.]+[-A-Za-z0-9+&@#/%=~_|]";
console.log(input.value);
//set value
let v = input.value;
if(v!=undefined&&v!="")
{
if(v.toLowerCase().match(validateString))
{
return null;
}
else{
return {
isUrl:true
}
}
}
return null;
}
}
注意：
這里當匹配成功（即驗證成功是需要返回 null 的，不能返回 {isUrl:false},失敗是返回的{isUrl:true}，不是返回 {isUrl:false}），這樣才會讓最后表單驗證的值為正確的表現。
這里{isUrl:true} 中的 isUrl，即為傳入的 FormControl 的.hasError()中的參數值。
調用頁面
<form [formGroup]="detailForm" (ngSubmit)="submit()">
<div>
<label for="LinkedURL">LinkedURL:</label>
<input type="LinkedURL" name="LinkedURL" id="LinkedURL" [formControl]="LinkedURL">
<div class="col-xs-4 col-sm-4" [style.color]="(LinkedURL.touched&&LinkedURL.valid==false)?'#d16e6c':'green'" [hidden]="LinkedURL.untouched">
<div [hidden]="!LinkedURL.hasError('maxlength')">LinkedURL can not be greater than 250 characters.</div>
<div [hidden]="!LinkedURL.hasError('isUrl')">LinkedURL is not an url.</div>
<div [hidden]="!LinkedURL.hasError('required')">Required field.</div>
<!--Success!-->
<div [style.color]="'green'" [hidden]="!LinkedURL.valid">Validate success!</div>
</div>
</div>
<button type="submit" [disabled]="!detailForm.valid">Log In</button>
</form>
調用頁面對應 ts
import { ValidateBase } from './../../Validators/Validator.base';
import { Component, OnInit } from '@angular/core';
import {
FormGroup,
FormBuilder,
FormControl,
Validators
} from '@angular/forms';
@Component({
selector: 'validate-component',
templateUrl: 'validate.component.html'
})
export class SweepstakesDetailComponent implements OnInit {
private detailForm: FormGroup;
private LinkedURL: FormControl;
ngOnInit(): void {
this.validateForm();
}
private validateForm(){
this.LinkedURL = new FormControl('',[
Validators.required,
Validators.maxLength(250),
ValidateBase.urlValidator
]);
//form
this.detailForm = this.formBuilder.group({
LinkedURL:this.LinkedURL,
});
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
