'Why is the value of the textarea updated if the Angular binding property has another value?

I have a component; the component is a textarea and should only accept values less than 1000 (I also added an input that should works in the same way). I have the [value] property with one-way binding from data source to view target, and an event (keydown) one-way binding from view target to data source. In this event, I added a validation only to accept values less than 1000, the problem is, if I'm editing the textarea, I can continue writing values greater than 1000. It seems like the value binding doesn't work.

the control is accepting values greater than 1000

The same behavior happens with the input, when I'm editing the control it accepts any value, but if it's just listening to the binding there it works.

I have the sample in stackblitz!

https://stackblitz.com/edit/angular-ct9ydy-jakhms?file=src%2Fapp%2Ftext-field-autosize-textarea-example.ts

I would appreciate any help you can offer me! 🙂



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source