时间戳

首页 > 解决方案 > 验证器指令正在捕获旧输入值而不是新输入值

angular - 验证器指令正在捕获旧输入值而不是新输入值

问题描述

每当发生更改时，我都会尝试触发对dateStart输入字段的验证，如下所示：

mycomponent.component.html

<input name="dateStart" type="text" 
       [(ngModel)]="contract.startDate" 
       (ngModelChange)="onStartDateChange($event)" [ngModelOptions]="{updateOn: 'change'}" 
       #dateStart="ngModel" myDateValidator 
       [dateStart]="contract.startDate" [dateEnd]="contract.endDate" 
       class="datepicker-input datepicker-border"
       style="width:100%" bsDatepicker required>

mycomponent.component.ts

onStartDateChange(event) {
  if(event) {
    this.contract.startDate = event;
  }
}

我的日期验证器.directive.ts

import { Directive, Input } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';

@Directive({
  selector: '[myDateValidator]',
  providers: [{provide: NG_VALIDATORS, useExisting: DateValidator, multi: true}]
})
export class DateValidator implements Validator {
  @Input() dateStart: Date;
  @Input() dateEnd: Date;
  constructor() { }

  validate(c: AbstractControl): { [key: string]: any } | null {
    if (!c || !(c.value)) {
      return null;
    }
    if (this.dateEnd < this.dateStart) {
      return {myDateValidator: false};
    }
    return null;
  }
}

然而，似乎onStartDateChange()在验证发生之前触发了事件处理程序并且contract.startDate实际更新了，验证器指令dateStartInput 在触发验证过程时始终捕获旧值而不是新值。已经存在关于相同问题的类似线程。请提供任何帮助将非常受欢迎。

标签： angulartypescriptvalidationdirective

解决方案

你可以尝试（keyPress）事件而不是（ngModelChange）

推荐阅读