Angular 自定义验证指令 - 错误行为不符合预期

帕特里克·格费勒

我尝试在 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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Angular指令的行为不符合预期。我需要一些帮助找出原因

来自分类Dev

Typescript方法为ng-repeat自定义过滤器,行为不符合预期

来自分类Dev

Angular.js ui:ng:repeat中的sortable行为不符合预期

来自分类Dev

验证Windows文件系统路径时,preg_match的行为不符合预期

来自分类Dev

Angular 9-自定义指令中的NgModel更改了Angular 7的行为

来自分类Dev

我可以以编程方式在自定义指令中应用Angular验证指令吗?

来自分类Dev

如何在Angular 2.0中创建自定义验证指令(即验证属性)?

来自分类Dev

Angular2-表单行为异常中的自定义指令

来自分类Dev

Angular2-表单行为异常中的自定义指令

来自分类Dev

验证错误消息未显示为Angular 2中的自定义验证

来自分类Dev

验证错误消息未显示为Angular 2中的自定义验证

来自分类Dev

angular 2自定义指令OnInit

来自分类Dev

angular js中的自定义指令

来自分类Dev

离子自定义指令被Angular忽略

来自分类Dev

Angular自定义指令未被调用

来自分类Dev

Angular JS reset自定义指令

来自分类Dev

为什么em的行为不符合定义

来自分类Dev

异步自定义验证器不起作用并在Angular 8中显示错误消息

来自分类Dev

angular4材质表中的自定义验证器结果错误

来自分类Dev

Angular 4 自定义验证器 ngIf 不显示错误 <span>

来自分类Dev

角度自定义验证指令。从视图模型中获取错误

来自分类Dev

Angular 表单自定义验证数据

来自分类Dev

Angular VS 2015 MVC自定义指令意外的标识符和期望值;错误

来自分类Dev

从角度指令返回自定义错误

来自分类Dev

Coffeescript类的行为不符合预期

来自分类Dev

SSLContext模拟行为不符合预期

来自分类Dev

类型n的行为不符合预期

来自分类Dev

CancellationTokenSource的行为不符合预期

来自分类Dev

WinWaitActive函数的行为不符合预期

Related 相关文章

  1. 1

    Angular指令的行为不符合预期。我需要一些帮助找出原因

  2. 2

    Typescript方法为ng-repeat自定义过滤器,行为不符合预期

  3. 3

    Angular.js ui:ng:repeat中的sortable行为不符合预期

  4. 4

    验证Windows文件系统路径时,preg_match的行为不符合预期

  5. 5

    Angular 9-自定义指令中的NgModel更改了Angular 7的行为

  6. 6

    我可以以编程方式在自定义指令中应用Angular验证指令吗?

  7. 7

    如何在Angular 2.0中创建自定义验证指令(即验证属性)?

  8. 8

    Angular2-表单行为异常中的自定义指令

  9. 9

    Angular2-表单行为异常中的自定义指令

  10. 10

    验证错误消息未显示为Angular 2中的自定义验证

  11. 11

    验证错误消息未显示为Angular 2中的自定义验证

  12. 12

    angular 2自定义指令OnInit

  13. 13

    angular js中的自定义指令

  14. 14

    离子自定义指令被Angular忽略

  15. 15

    Angular自定义指令未被调用

  16. 16

    Angular JS reset自定义指令

  17. 17

    为什么em的行为不符合定义

  18. 18

    异步自定义验证器不起作用并在Angular 8中显示错误消息

  19. 19

    angular4材质表中的自定义验证器结果错误

  20. 20

    Angular 4 自定义验证器 ngIf 不显示错误 <span>

  21. 21

    角度自定义验证指令。从视图模型中获取错误

  22. 22

    Angular 表单自定义验证数据

  23. 23

    Angular VS 2015 MVC自定义指令意外的标识符和期望值;错误

  24. 24

    从角度指令返回自定义错误

  25. 25

    Coffeescript类的行为不符合预期

  26. 26

    SSLContext模拟行为不符合预期

  27. 27

    类型n的行为不符合预期

  28. 28

    CancellationTokenSource的行为不符合预期

  29. 29

    WinWaitActive函数的行为不符合预期

热门标签

归档