angular2自定义模板验证程序具有过时值

Question

我现在卡住了一段时间,出现以下问题.我正在实现一个角度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的值就像是落后的一步.如何解决？

我创建了一个用于显示问题的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; 
  }
}

改良的Plunker

你可以删除 updateValueAndValidity

另请参见角度源代码

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