我尝试在 Angular 7.0.5 中编写自定义验证器,但无法获取和显示错误。
尝试调试代码并在 google 和 stackoverflow 上搜索答案或提示。
在我使用的模板下方:
<form #formWithDirective="ngForm" name="formWithDirective">
<input ngModel #desiredWithDirective="ngModel" inFuture="2018-04-27"
type = "date"
name = "desiredWithDirective">
<div *ngIf="desiredWithDirective.errors?.future">
{{ desiredWithDirective.errors | json }}
</div>
</form>
该指令:
import { Directive, forwardRef, Input } from '@angular/core';
import { Validator, AbstractControl, ValidationErrors, NG_VALIDATORS } from '@angular/forms';
import { MyValidators } from './my-validators';
@Directive({
selector: '[ngModel][inFuture],[formControl][inFuture],[formControlName][inFuture]',
providers: [{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => FutureDirective),
multi: true
}]
})
export class FutureDirective implements Validator {
@Input()
inFuture: string;
constructor() { }
validate(control: AbstractControl): ValidationErrors | null {
let date: Date;
if (this.inFuture !== '') {
date = new Date(this.inFuture);
}
return MyValidators.isFuture( date )( control );
}
registerOnValidatorChange?(fn: () => void): void;
}
以及 inFuture 函数的实际实现:
import { ValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms';
export class MyValidators {
static readonly isFuture: (condition?: Date) => ValidatorFn
= (condition?: Date): ValidatorFn => (control: AbstractControl): ValidationErrors | null => {
if (control.value === null || control.value === '') {
return null;
}
const selectedDate = new Date(control.value);
const currentDate = (condition == null) ? new Date() : condition;
const isFuture = selectedDate > currentDate;
return isFuture
? null
: { 'future': { currentDate, selectedDate } };
}
}
我希望如果我选择过去的日期会显示错误。但没有显示错误。如果我调试代码并MyValidators.isFuture( date )( control );
在 chrome 控制台中执行,我会收到以下错误:
Uncaught ReferenceError: MyValidators is not defined
at eval (eval at push../src/app/my-validators/future.directive.ts.FutureDirective.validate (future.directive.ts:25), <anonymous>:1:1)
at FutureDirective.push../src/app/my-validators/future.directive.ts.FutureDirective.validate (future.directive.ts:25)
at forms.js:792
at forms.js:608
at Array.map (<anonymous>)
at _executeValidators (forms.js:608)
at forms.js:573
at forms.js:608
at Array.map (<anonymous>)
at _executeValidators (forms.js:608)
任何有关如何解决此问题的提示将不胜感激。
好吧,我没有在此stackblitz 中更改任何内容,它运行良好,但在调用该函数时仍然出现相同的控制台错误。由于您没有分享您的 ngModule:您是不是忘记声明您的指令?
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句