I've been struggling with a specific issue for quite some time now. I'm working on setting up an Angular 2 custom validator that checks if a number falls within a certain range. When used as follows, everything functions correctly:
<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>
However, in my scenario, the validation process is a bit more complex. It involves a dropdown menu where the validity range depends on the selected option. There's an event tied to the dropdown that sets doseFrom and doseTo properties accordingly:
<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>
The issue I'm facing is that the validator evaluates the value using the previous from and to selections instead of the current ones. How can I resolve this problem?
To provide a clearer picture, I've set up a Plunker showcasing the dilemma: https://plnkr.co/edit/C0sbL8pRwsZcEZ5r1ODY?p=preview