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; 
  }
}

<强> Modified Plunker

您可以删除updateValueAndValidity

另见角度源代码

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

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

1 个答案: