Angular - числовая маска для реактивных форм, поддерживающая минимальное и максимальное значения

Question

Мне нужно убедиться, что во входном тексте вводятся только цифры. Я всегда использовал angular2-text-mask , но теперь я также должен убедиться, что есть ограничения. Мин. И макс. Значение. Предположим, что минимальное значение равно 1500, а максимальное - 16000. Если введено число меньше 1500, тогда это значение будет заменено 1500. Если введено число больше 16000, то это число будет заменено 16000. Я знаю, что мог используйте проверку форм, но пользовательский интерфейс был разработан не так.

Я покрыл в значительной степени то, что мне нужно, с помощью этой маски, кроме минимума и максимальные требования. Ты хоть представляешь, как я могу получить этот результат?

Answer 1

Альтернативой может быть ViewChild.

0) Поместите ссылку на шаблон на вход, чтобы иметь возможность ссылаться на него.

<input #myNumInput>

и в ts:

@ViewChild('myNumInput') mynuminput: ElementRef;

1) зарегистрировать событие keyup входа.

<input #myNumInput (keyup)="onInputKeyup(#myNumInput.value)">

2) в onInputKeyup функцию, проверьте заданное значение и, если оно выходит за пределы диапазона, который вы пытаетесь ограничить, отрегулируйте его с помощью viewchild:

`if (value < 1500)
    this.mynuminput.value = 1500
 else if (value > 16000)
    this.mynuminput.value = 16000`