Как остановить символы в поле ввода type = "text" в угловых

Question

Мои требования к клиенту следующие: 1. Поле ввода должно быть текстом 2. Оно не должно допускать символы 3. Оно должно иметь диапазон от 0 до 100 4. Формат ввода 99,99

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

Может кто-нибудь, пожалуйста, помогите мне.Я борюсь с одного дня :( Спасибо!

Answer 1

Для достижения ожидаемого результата используйте следующие параметры: keyup событие

1. При каждом нажатии клавиши значение ввода увеличивается на '.'
2. Первая часть массива разбиения будет иметь значение до десятичной точки, а вторая часть массива будет иметь значение после десятичной точки
3. Переназначить входное значение на основе длины

component.html

<input type="text" (keyup)="onKeyup($event)" />

component.ts

 onKeyup(e) {
    const val = e.target.value.split(".");
    if (!val[1]) {
      e.target.value =
        val[0].split("").length > 2
          ? e.target.value.substr(0, e.target.value.length - 1)
          : e.target.value;
    } else {
      e.target.value =
        val[1].split("").length > 2
          ? val[0] + "." + val[1].substr(0, val[1].length - 1)
          : e.target.value;
    }
  }

пример рабочего кода для справки - https://codesandbox.io/s/angular-p1gh1

Обновленокод с HTML и javascript

codepen - https://codepen.io/nagasai/pen/xoLqdN?editors=1010

function onKeyup(e) {
  const val = e.target.value.split(".");
    if (!val[1]) {
      e.target.value =
        val[0].split("").length > 2
          ? e.target.value.substr(0, e.target.value.length - 1)
          : e.target.value;
    } else {
      e.target.value =
        val[1].split("").length > 2
          ? val[0] + "." + val[1].substr(0, val[1].length - 1)
          : e.target.value;
    }
  }

<input type="text" onkeyup ="onKeyup(event)"/>