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:
onNgModelChangeis called with argument 150- inside
onNgModelChangeI change the value of the model to 100 - validation is triggered for value 100, the value is valid
- after
onNgModelChangefinishes, 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.