angular2カスタムテンプレートバリデーターが無効な値を持っています

私はしばらくの間、次の問題を抱えています。私は、数値が範囲内にあるかどうかを単に調べる角度2のカスタムバリデーターを実装しています。このように使用すると、すべて正常に動作します。angular2カスタムテンプレートバリデーターが無効な値を持っています

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

私の場合、検証はもう少し複雑です。ドロップダウンがあります。開始値と終了値は、ドロップダウンの選択によって異なります。そこ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の値は、一歩後ろのようなものです。それを修正するには？それは働いてないし、私はregisterOnValidatorChangeメソッドを実装し https://plnkr.co/edit/C0sbL8pRwsZcEZ5r1ODY?p=preview

出典

2017-03-19 yonexbat

それだけで罰金 –

残念なことに:(しないだろう。テキストボックスに新しい値を入力すると、正常に動作します。しかし、ドロップダウンで別の範囲が選択されると、バリデーターは古い範囲を持ちます。 doseControl.updateValueAndValidity（）が（コンポーネント内で）呼び出されると、バリデータはまだ新しい値を取得しませんでした。どのように私はdoseControl.updateValueAndValidity（）を呼び出す前にバインディングを強制的に更新することができます。 – yonexbat

：

私は、問題を表示するためにplunkerを作成

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

を削除することができます

も参照角度のソースコード