I have a textbox which has ngModel, ngModelOptions(updateOn: 'blur') and it has onblur event handler. Now i am validating input value on blur event callback and if the value is less than 100 i will show error message and i will empty the text box value.

Issue: If I enter the value lessthan 100 then the textbox value is clearing properly only for the first time. From second time onwards the value is not emptied.

for example: enter 12 in input box and blur the input box we are getting the error message and it is lessthan 100 so value is set to empty(""). Now, i remove the 12 in input box and entered 55 this time the error message is showing up but the value is not clearing. It is showing the previous value.

Note: I tried to trigger angular change detection(detechChanges()) on blur event(after setting value to empty) even though the value is not clearing second time onwards.

can you please have a look at the stackblitz link(https://stackblitz.com/edit/angular-oyzcf8?file=src/app/app.component.ts) and let me know if there is anything I am missing here. Thanks