Разрешить только десятичное значение для текстового поля в angular 7

Question

В Angular 7, как я могу замаскировать поле ввода (текстовое поле) таким образом, чтобы оно принимало только десятичное значение, например (8.15 или 15.25)?

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

<input type="text" name="amount" id="amount" pattern="[0-9]+(\.[0-9][0-9]?)?" (keypress)="numbersOnly($event)">

у меня есть следующие номера функций, которые допускают только десятичные числа, но не должны вводить десятичную точку (.) Более одного раза, как показано ниже.

8.155454 или 8.65.24

это должно позволять только 1 десятичный знак после числа, как показано ниже.

8,15 или 80,45 или 555,14

ниже моя функция, которая принимает только десятичное значение.

 numbersOnly(event: any) {
    let charCode = (event.which) ? event.which : event.keyCode;
    if (charCode != 46 && charCode > 31
        && (charCode < 48 || charCode > 57))
        return false;
    return true;
  }

Answer 1

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

Я сделал это, добавив onkeypress="return slideNumber_keyFilter( event );" к моему элементу ввода, а затем использовал эту функцию:

      <script>
        function slideNumber_keyFilter( event ) {
          return ( ( event.charCode >= 48 ) && ( event.charCode <= 57 ) );
        }
      </script>

, которая в моем случае не позволяла использовать какие-либо периоды, но вы можете просто заменить код, который проверяет ввод и отслеживает, введен ли период, и запрещать другой.