angular如何實(shí)現(xiàn)表單驗(yàn)證器驗(yàn)證的同時(shí)限制輸入

小編給大家分享一下angular如何實(shí)現(xiàn)表單驗(yàn)證器驗(yàn)證的同時(shí)限制輸入，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

angular里面對(duì)于表單驗(yàn)證，設(shè)置了很多指令。

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

ng-app     啟動(dòng)你angular的模塊

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

ng-options  循環(huán)你select里面的option標(biāo)簽，很好用的

 ng-submit，表單提交執(zhí)行的

novalidate  表單form配合后期檢測(cè)的

ng-model  實(shí)現(xiàn)雙數(shù)據(jù)綁定

ng-show 根據(jù)一定的邏輯實(shí)現(xiàn)顯示

ng-cloak 綁定在節(jié)點(diǎn)上，防止節(jié)點(diǎn)渲染，angular指令閃爍

ng-class class類名根據(jù)你的邏輯，出現(xiàn)

ng-required 檢測(cè)你的input為不為空

ng-pattern 正則表達(dá)式，綁定在input上面限制輸入規(guī)范

ng-maxlength 最多輸入限制

ng-minlength 最少輸入限制

ng-disabled="myForm.$invalid" 臟檢測(cè)

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

仔細(xì)回想以前使用響應(yīng)式表單的驗(yàn)證器的時(shí)候，只是驗(yàn)證輸入的值是否非法，而沒有做對(duì)應(yīng)的限制輸入，比如當(dāng)輸入一串金額的時(shí)候只能輸入數(shù)字，有這種需求的時(shí)候，我們?cè)撛趺醋鱿拗戚斎?？用input來監(jiān)聽？用onModelChange來監(jiān)聽？我們可以直接寫在驗(yàn)證器里面。

表單的驗(yàn)證分為模板驅(qū)動(dòng)驗(yàn)證和響應(yīng)式表單的驗(yàn)證，響應(yīng)式表單添加自定義驗(yàn)證器非常方便，所以我們來直接以響應(yīng)式表單的驗(yàn)證為研究基礎(chǔ)。

首先構(gòu)造基本的表單：

<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)]],
  });
}

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

現(xiàn)在我們需要在驗(yàn)證的同時(shí)限制輸入，比如只讓用戶輸入數(shù)字，其他的一切都不可輸入。

創(chuàng)建驗(yàn)證器，在驗(yàn)證的同時(shí)，限制輸入

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

思路是，創(chuàng)建驗(yàn)證器，當(dāng)有輸入值的時(shí)候，驗(yàn)證器運(yùn)行，判斷是否是全數(shù)字，如果不是就進(jìn)行替換。我們可以得到如下的驗(yàn)證器：

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

將驗(yàn)證器使用在我們的響應(yīng)式表單上：

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

運(yùn)行程序，隨便輸入來測(cè)試測(cè)試，竟然是ok的？?（那我前幾次的時(shí)候是做了什么騷造作讓瀏覽器堆棧溢出的？？？）

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

• onlySelf：如果為 true，則每次變更只影響該控件本身，不影響其父控件。默認(rèn)為 false。

• emitEvent：如果為 true 或未提供（默認(rèn)），則當(dāng)控件值變化時(shí)， statusChanges 和 valueChanges 這兩個(gè) Observable 都會(huì)以最近的狀態(tài)和值發(fā)出事件。 如果為 false，則不會(huì)發(fā)出事件。

• emitModelToViewChange：如果為 true 或未提供（默認(rèn)），則每次變化都會(huì)觸發(fā)一個(gè) onChange 事件以更新視圖。

• emitViewToModelChange：如果為 true 或未提供（默認(rèn)），則每次變化都會(huì)觸發(fā)一個(gè) ngModelChange 事件以更新模型。

首先，對(duì)于onlySelf來講，如果我們有跨字段的驗(yàn)證的話，設(shè)置這個(gè)為false就不影響表單層次的驗(yàn)證器。emitEvent是對(duì)statusChange和valeChanges兩個(gè)Observable的影響，一般我們用Observable的方式監(jiān)聽字段的值變化時(shí)有用到。emitModelToViewChange配置是觸發(fā)onChange來更新視圖的，如果如果設(shè)置為false的話，無論我們?cè)趺锤伦侄蔚闹担遣粫?huì)顯示在頁面上的。emitViewToModelChange觸發(fā)ngModelCahnge時(shí)間更新模型，但好像這個(gè)參數(shù)設(shè)置為false并沒什么用。

得得得，好的就行。

假如我們需要在驗(yàn)證的條件也和其他表單字段有關(guān)系怎么辦？那我們需要formGroup級(jí)的驗(yàn)證。

formGroup的驗(yàn)證器

我們需要這樣創(chuàng)建驗(yàn)證器，返回一個(gè)由formGroup構(gòu)成的驗(yàn)證器：

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']),
});

以上是“angular如何實(shí)現(xiàn)表單驗(yàn)證器驗(yàn)證的同時(shí)限制輸入”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！