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的值取決於下拉列表的選擇。還有，設置doseFromdoseTo屬性附加到下拉列表只是一個事件：

<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