我有自定義的角度驗證器定義如下
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';
import { Directive, Input } from '@angular/core';
@Directive({
selector: '[ecMinVal]',
providers: [
{
provide: NG_VALIDATORS,
useExisting: ecMinVal,
multi: true
}]
})
export class ecMinVal implements Validator {
@Input() ecMinVal = 0;
validate(control: AbstractControl): { [key: string]: any } | null {
return Number(control.value) < this.ecMinVal ? { 'lessThanMinVal': true } : null;
}
}
我在這樣的數字文本框組件中使用它
<div >
<input type="number"
#txtBoxNumber="ngModel"
[ecMinVal]="ecMinVal1"
[(ngModel)]="value"
(focus)="onFocus($event)"
(ngModelChange)="change($event)"
onkeydown="if(event.key==='.' || event.key==='e' || event.key==='E'){event.preventDefault();}"
ng-required="required">
<div *ngIf="txtBoxNumber.errors?.['lessThanMinVal'] " >
<span>
Value should be greater than or equal to {{ecMinVal1}}
</span>
</div>
</div>
我希望用戶看到驗證值應該大于或等于 {{ecMinVal1}}。當用戶更改值并且該值小于變數ecMinVal1的值時，這可以正常作業
但是，我希望用戶在瀏覽器中完成加載組件時看到此訊息，即使用戶沒有更改任何內容。
不確定為什么txtBoxNumber.errors在組件加載時為空，并在用戶更改值時填充。
uj5u.com熱心網友回復：
因為默認值為 null 并且在驗證器中您正在轉換該值
- Number(null) 產生 0, 0 < 0 是假的
- Number(undefined) 產生 NaN, NaN < 0 是假的。
您可以在之前添加一些檢查
validate(control: AbstractControl): { [key: string]: any } | null {
const value = control.value;
if (typeof value === 'undefined' || value === null) {
return { lessThanMinVal: true };
}
return Number(value) < this.ecMinVal ? { lessThanMinVal: true } : null;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/352512.html
標籤：有角的