小編給大家分享一下angular如何實現(xiàn)表單驗證器驗證的同時限制輸入，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
創(chuàng)新互聯(lián)是專業(yè)的洪江網(wǎng)站建設(shè)公司，洪江接單;提供
成都網(wǎng)站建設(shè)、成都做網(wǎng)站,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行洪江網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!
angular里面對于表單驗證，設(shè)置了很多指令。
也就是說不用自己寫一些邏輯，直接綁定指令就行。
ng-app 啟動你angular的模塊
ng-controller 控制器，啟動你angualr里面的邏輯代碼作用在頁面上
ng-options 循環(huán)你select里面的option標(biāo)簽，很好用的
ng-submit，表單提交執(zhí)行的
novalidate 表單form配合后期檢測的
ng-model 實現(xiàn)雙數(shù)據(jù)綁定
ng-show 根據(jù)一定的邏輯實現(xiàn)顯示
ng-cloak 綁定在節(jié)點上，防止節(jié)點渲染，angular指令閃爍
ng-class class類名根據(jù)你的邏輯，出現(xiàn)
ng-required 檢測你的input為不為空
ng-pattern 正則表達式，綁定在input上面限制輸入規(guī)范
ng-maxlength 最多輸入限制
ng-minlength 最少輸入限制
ng-disabled="myForm.$invalid" 臟檢測
大概就需要這些指令了，大家不要噴我。謝謝
仔細回想以前使用響應(yīng)式表單的驗證器的時候，只是驗證輸入的值是否非法，而沒有做對應(yīng)的限制輸入，比如當(dāng)輸入一串金額的時候只能輸入數(shù)字，有這種需求的時候，我們該怎么做限制輸入？用input來監(jiān)聽？用onModelChange來監(jiān)聽？我們可以直接寫在驗證器里面。
表單的驗證分為模板驅(qū)動驗證和響應(yīng)式表單的驗證，響應(yīng)式表單添加自定義驗證器非常方便，所以我們來直接以響應(yīng)式表單的驗證為研究基礎(chǔ)。
首先構(gòu)造基本的表單：
GA Code
validateForm: FormGroup;
constructor(
private fb: FormBuilder,
) {
}
ngOnInit() {
this.validateForm = this.fb.group({
code: [33, [Validators.required, Validators.maxLength(6)]],
});
}我們創(chuàng)建的這個響應(yīng)式表單是要驗證一個谷歌驗證的「code」字段，并給與了兩個驗證器，一個必填驗證，一個驗證長度最長是6位。運行起來后，我們輸入的如果超過6位范圍輸入框就會變成紅色，這是OK的。
現(xiàn)在我們需要在驗證的同時限制輸入，比如只讓用戶輸入數(shù)字，其他的一切都不可輸入。
創(chuàng)建驗證器，在驗證的同時，限制輸入
我們使用正則表達式來判斷。首先，判斷一個字符串是否是全數(shù)字：/^\d*$/.test(value)。然后將有「雜質(zhì)」的字符串修正為純數(shù)字：value.replace(/[^0-9]/ig, '')。
思路是，創(chuàng)建驗證器，當(dāng)有輸入值的時候，驗證器運行，判斷是否是全數(shù)字，如果不是就進行替換。我們可以得到如下的驗證器：
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īng)式表單上：
this.validateForm = this.fb.group({
code: [33, [Validators.required, this.onlyNumber(), Validators.maxLength(6)]],
});運行程序，隨便輸入來測試測試，竟然是ok的？?（那我前幾次的時候是做了什么騷造作讓瀏覽器堆棧溢出的？？？）
emmmmmmmm。。。。。。我上次確實是讓瀏覽器堆棧溢出了，這次正常反而很奇怪了。不影響，我們來看看setValue(value, options)的options幾個配置參數(shù)吧：
onlySelf：如果為 true，則每次變更只影響該控件本身，不影響其父控件。默認為 false。
emitEvent：如果為 true 或未提供（默認），則當(dāng)控件值變化時， statusChanges 和 valueChanges 這兩個 Observable 都會以最近的狀態(tài)和值發(fā)出事件。 如果為 false，則不會發(fā)出事件。
emitModelToViewChange：如果為 true 或未提供（默認），則每次變化都會觸發(fā)一個 onChange 事件以更新視圖。
emitViewToModelChange：如果為 true 或未提供（默認），則每次變化都會觸發(fā)一個 ngModelChange 事件以更新模型。
首先，對于onlySelf來講，如果我們有跨字段的驗證的話，設(shè)置這個為false就不影響表單層次的驗證器。emitEvent是對statusChange和valeChanges兩個Observable的影響，一般我們用Observable的方式監(jiān)聽字段的值變化時有用到。emitModelToViewChange配置是觸發(fā)onChange來更新視圖的，如果如果設(shè)置為false的話，無論我們怎么更新字段的值，是不會顯示在頁面上的。emitViewToModelChange觸發(fā)ngModelCahnge時間更新模型，但好像這個參數(shù)設(shè)置為false并沒什么用。
得得得，好的就行。
假如我們需要在驗證的條件也和其他表單字段有關(guān)系怎么辦？那我們需要formGroup級的驗證。
formGroup的驗證器
我們需要這樣創(chuàng)建驗證器，返回一個由formGroup構(gòu)成的驗證器：
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如何實現(xiàn)表單驗證器驗證的同時限制輸入”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
文章標(biāo)題：angular如何實現(xiàn)表單驗證器驗證的同時限制輸入-創(chuàng)新互聯(lián)
文章路徑：
http://weahome.cn/article/hphpc.html
重慶分公司
重慶分公司
