I am working on a custom component which is supposed to be used as a "time only" input. For that I am using the primeNg inputMask with the mask "99:99". Then it should be additionally filtered if the numbers are higher than 23:59.
The way I am doing it is as the following:
HTML:
<p-inputMask mask="99:99" [(ngModel)]="inputModel" (onBlur)="onValueChanged()"></p-inputMask>
TS:
onValueChanged(): void {
const userInput = this.inputModel?.split(":");
if (userInput != null) {
const hours = +userInput[0] > 23 ? null : userInput[0];
const minutes = +userInput[1] > 59 ? null : userInput[1];
this.inputModel = (hours !== null && minutes !== null) ? `${hours}:${minutes}` : null;
console.log("updated: ",this.inputModel);
}
}
}
If I enter for example: 88:88 and then trigger the onBlur event.
The function is running and the console logs null. However the input field still contains the "88:88", but then if I focus and blur again, then the number goes away. I am not pretty sure, if I am having an issue with the order how the function is running, but it shouldn't matter because the model should change the value as soon as it got changed in the code, right?
HOWEVER!
If I use (onComplete) instead of the blur event, everything works fine. The input field becomes empty as soon as the function gets triggered. The reason why I want to use onBlur instead of onComplete is because I am using signalR to live update for all clients, and I dont want to have the possible outcome of having an update with every keydown. (is possible, if you have already a time in it and change only one number and then want to change another number, two events will get fired)
I tried to use @ViewChild and subscribe to it using rxJS but that didnt work out for me either. Additionally I want to keep it as simple as possible and dont really want to use multiple libraries just for one function.
Thank you in forward for investing your time in my question!
