Angular 2: How to modify value in ngModelChange without disrupting validation?

Viewed 1183

I have created own implementation of number spinner component with input:

<span ...>
<input 
    type="text" 
    class="form-control ui-spinner-input" 
    #spinnerModel="ngModel" 
    [ngModel]="parameter.value" 
    (ngModelChange)="onNgModelChange($event)"
    [spinnerValidator]="parameter" 
/>
<button ...

I want to modify the value of input in some cases, for example, the user enters value over maximum limit, I want to set the value to the maximum allowed. When I do this in onNgModelChange, there is a problem with validation.

For example, the maximum is 100, but user enters 150, this is what happens:

  • onNgModelChange is called with argument 150
  • inside onNgModelChange I change the value of the model to 100
  • validation is triggered for value 100, the value is valid
  • after onNgModelChange finishes, validation for value 150 is triggered and input is rendered as invalid, although in model and input there's already the value of 100, which is valid

How can I modify that value correctly?

Edit

There's a workaround for validation:

onNgModelChange(newObj: any) {
    ...
    setTimeout(() => {
        this.spinnerModel.control.setValue(numericValue, {onlySelf: false, emitEvent: true, emitModelToViewChange: true, emitViewToModelChange: false});
    }, 0);
    ...
}

where numericValue is tampered value which should be applied. Though there's a glitch in GUI, because at first invalid value is processed and GUI notices it for fraction of a second and just after that new/valid value is applied.

0 Answers
Related