При вставке того же значения в поле ввода, при повторном вставке двусторонняя привязка данных не работает

Question

У меня есть следующий тег ввода:

<input type="number" [ngModel]="position" (ngModelChange)="onChangePosition($event)" />

onChangePosition функция в основном проверяет длину входного значения, если длина больше 3, она обрезает и оставляет только 3 числа. Когда я вставляю длинные числа, такие как 12345 , в первый раз он обрезает и устанавливает свойство 123 в position, и это отражается на виде. Но при вставке того же значения поверх старого во второй раз, position изменяется, как и раньше, но не отражается на представлении.

Вы можете увидеть это поведение в DEMO

Скопируйте значение 12345 и вставьте его в поле, вы увидите 123 . Правильный результат. Затем снова вставьте значение в поле, вы увидите, что позиция изменилась, но внутри поля ввода она осталась прежней. Нежелательный результат.

Ценю любое предложение.

Answer 1

Вы можете использовать разрыв между тем, что вы вводите, и тем, что находится в ngModel с событием (input):

<input type="number" #myPosition
       [ngModel]="position"
       (input)="myPosition.value = position"
       (ngModelChange)="onChangePosition($event)" />

Здесь я использовал переменную шаблона и ее значение

DEMO