angular里面對于表單驗證，設置了很多指令。

也就是說不用自己寫一些邏輯，直接綁定指令就行。

ng-app     啟動你angular的模塊

 ng-controller 控制器，啟動你angualr里面的邏輯代碼作用在頁面上

ng-options  循環你select里面的option標簽，很好用的

 ng-submit，表單提交執行的

novalidate  表單form配合后期檢測的

ng-model  實現雙數據綁定

ng-show 根據一定的邏輯實現顯示

ng-cloak 綁定在節點上，防止節點渲染，angular指令閃爍

ng-class class類名根據你的邏輯，出現

ng-required 檢測你的input為不為空

ng-pattern 正則表達式，綁定在input上面限制輸入規范

ng-maxlength 最多輸入限制

ng-minlength 最少輸入限制

ng-disabled="myForm.$invalid" 臟檢測

大概就需要這些指令了，大家不要噴我。謝謝

仔細回想以前使用響應式表單的驗證器的時候，只是驗證輸入的值是否非法，而沒有做對應的限制輸入，比如當輸入一串金額的時候只能輸入數字，有這種需求的時候，我們該怎么做限制輸入？用input來監聽？用onModelChange來監聽？我們可以直接寫在驗證器里面。

表單的驗證分為模板驅動驗證和響應式表單的驗證，響應式表單添加自定義驗證器非常方便，所以我們來直接以響應式表單的驗證為研究基礎。

首先構造基本的表單：

<form nz-form [formGroup]="validateForm"> <nz-form-item>  <nz-form-label [nzSpan]="6" nzFor="code">GA Code</nz-form-label>  <nz-form-control [nzSpan]="14">   <input nz-input name="code" formControlName="code" id="code">  </nz-form-control> </nz-form-item ></form>

validateForm: FormGroup;constructor(  private fb: FormBuilder,) {}ngOnInit() {  this.validateForm = this.fb.group({    code: [33, [Validators.required, Validators.maxLength(6)]],  });}

我們創建的這個響應式表單是要驗證一個谷歌驗證的「code」字段，并給與了兩個驗證器，一個必填驗證，一個驗證長度最長是6位。運行起來后，我們輸入的如果超過6位范圍輸入框就會變成紅色，這是OK的。

現在我們需要在驗證的同時限制輸入，比如只讓用戶輸入數字，其他的一切都不可輸入。

創建驗證器，在驗證的同時，限制輸入

我們使用正則表達式來判斷。首先，判斷一個字符串是否是全數字：/^/d*$/.test(value)。然后將有「雜質」的字符串修正為純數字：value.replace(/[^0-9]/ig, '')。

思路是，創建驗證器，當有輸入值的時候，驗證器運行，判斷是否是全數字，如果不是就進行替換。我們可以得到如下的驗證器：

onlyNumber(): ValidatorFn {  return (control: AbstractControl): {[key: string]: any} | null => {    // value有值且如果值包含非數字，就需要替換    if (control.value && !/^/d*$/.test(control.value)) {      control.setValue(control.value.replace(/[^0-9]/ig, ''), {        emitEvent: false,        emitViewToModelChange: false,      });    }    return null;  };}

將驗證器使用在我們的響應式表單上：

this.validateForm = this.fb.group({  code: [33, [Validators.required, this.onlyNumber(), Validators.maxLength(6)]],});

運行程序，隨便輸入來測試測試，竟然是ok的？😯（那我前幾次的時候是做了什么騷造作讓瀏覽器堆棧溢出的？？？）

emmmmmmmm。。。。。。我上次確實是讓瀏覽器堆棧溢出了，這次正常反而很奇怪了。不影響，我們來看看setValue(value, options)的options幾個配置參數吧：

• onlySelf：如果為 true，則每次變更只影響該控件本身，不影響其父控件。默認為 false。
• emitEvent：如果為 true 或未提供（默認），則當控件值變化時， statusChanges 和 valueChanges 這兩個 Observable 都會以最近的狀態和值發出事件。 如果為 false，則不會發出事件。
• emitModelToViewChange：如果為 true 或未提供（默認），則每次變化都會觸發一個 onChange 事件以更新視圖。
• emitViewToModelChange：如果為 true 或未提供（默認），則每次變化都會觸發一個 ngModelChange 事件以更新模型。

首先，對于onlySelf來講，如果我們有跨字段的驗證的話，設置這個為false就不影響表單層次的驗證器。emitEvent是對statusChange和valeChanges兩個Observable的影響，一般我們用Observable的方式監聽字段的值變化時有用到。emitModelToViewChange配置是觸發onChange來更新視圖的，如果如果設置為false的話，無論我們怎么更新字段的值，是不會顯示在頁面上的。emitViewToModelChange觸發ngModelCahnge時間更新模型，但好像這個參數設置為false并沒什么用。

得得得，好的就行。

假如我們需要在驗證的條件也和其他表單字段有關系怎么辦？那我們需要formGroup級的驗證。

formGroup的驗證器

我們需要這樣創建驗證器，返回一個由formGroup構成的驗證器：

onlyNumberValidator(formKeys: string[]): ValidatorFn {  return (formGroup: FormGroup): ValidationErrors | null => {    for (const key of formKeys) {      const value = formGroup.controls[key].value;      if (value && !/^/d*$/.test(value)) {        formGroup.controls[key].setValue(value.replace(/[^0-9]/ig, ''), {          onlySelf: true,        });      }    }    return null;  }};

使用：

this.validateForm = this.fb.group({  typeList: [[]],  feeRate: [null, [Validators.required, Validators.pattern(/^[0-9]+(.[0-9]{1,2})?$/), Validators.max(0.999)]],  code: [33, [Validators.required, Validators.maxLength(6)]],}, {  validator: this.onlyNumberValidator(['code']),});

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。