validation - angular2 自定义模板验证器具有过时值-6ren

validation - angular2 自定义模板验证器具有过时值

转载作者：太空狗更新时间：2023-10-29 18:13:40

我现在被以下问题困住了一段时间。我正在实现一个 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>

在我的例子中，验证有点复杂。有一个下拉菜单。从和到值取决于下拉列表的选择。只有一个事件附加到设置 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

最佳答案

我会实现 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; 
  }
}