angular2 自定义模板验证器具有陈旧的值

Question

我现在被以下问题困住了一段时间。我正在实现一个 angular 2 自定义验证器，它只是检查一个数字是否在一个范围内。像这样使用，一切正常：

<input type="text" id="doseSimple" class="form-control"
       required 
       name="doseSimple" 
       [(ngModel)]="doseSimple"
       #doseControl ="ngModel"
       validateRange
       from="2"
       to="20"
       >

<div *ngIf="doseControl.errors && (doseControl.dirty || doseControl.touched)">
   <span *ngIf="doseControl.errors.tooSmall">Too small</span>
   <span *ngIf="doseControl.errors.tooBig">Too big</span>
</div> 

就我而言，验证要复杂一些。有一个下拉菜单。 from 和 to 值取决于下拉菜单的选择。只有一个附加到设置 doseFrom doseTo 属性的下拉列表的事件：

  <input type="text" id="name" class="form-control"
         required 
         name="doseComplex" 
         [(ngModel)]="doseComplex"
         #doseComplexControl ="ngModel"
         validateRange
         [from]="doseFrom"
         [to]="doseTo"
         >
  <div *ngIf="doseComplexControl.errors && (doseComplexControl.dirty || doseComplexControl.touched)">
     <span *ngIf="doseComplexControl.errors.tooSmall">Too small</span>
     <span *ngIf="doseComplexControl.errors.tooBig">Too big</span>
  </div> 

验证器验证值，但使用 from 和 to 来自之前的选择。 from 和 to 的值就像落后了一步。如何解决？

我创建了一个 plunker 来显示问题： https://plnkr.co/edit/C0sbL8pRwsZcEZ5r1ODY?p=preview

Answer 1

我会实现registerOnValidatorChange 方法来让它工作：

export class RangeValidator implements Validator {
  @Input()
  get from() {
    return this._from;
  }
  set from(value: number) {
    this._from = value;
    if (this._onChange) this._onChange();
  }

  @Input()
  get to() {
    return this._to;
  }
  set to(value: number) {
    this._to = value;
    if (this._onChange) this._onChange();
  }

  validate(c: FormControl): { [key: string]: boolean; } {
    ...
  }

  private _from: number;

  private _to: number;

  private _onChange: () => void;

  registerOnValidatorChange(fn: () => void): void { 
    this._onChange = fn; 
  }
}

Modified Plunker

你可以删除updateValueAndValidity

另见角度源代码

• https://github.com/angular/angular/blob/4.0.0-rc.5/packages/forms/src/directives/validators.ts#L67-L90