Отображение текста при вводе числа (связанного со значением)
Допустим, у меня есть ввод числа только с несколькими возможными значениями, такими как следующие:
<label for = "test" translate = "entities.test"></label>
<input id = "test" name = "test" type = "number" min = "1" max = "4" [(ngModel)] = "model.test" class = "form-control" [disabled] = "isDisabled()" formControlName = "test">
Я хочу сохранить числовое значение, но отображать некоторый текст для каждого значения, например:
"1 - Высокий"
"2 - Средний"
"3 - Низкий"
"4 - незначительно"
Вместо просто числа на входе.
Это выполнимо?
Или мне обязательно нужно использовать текстовый ввод с ограничением шаблона, чтобы ограничить ввод целыми числами от 1 до 4, а затем преобразовать значение из текста в число перед отправкой его на мой сервер
Насколько я понимаю, вам нужен select здесь, а не в input
Зависит от того, где вы хотите его отобразить...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Поскольку у вас есть только 4 различных значения, лучше использовать <select>
Значение и текст в опции выбора полностью независимы
Так это будет выглядеть так:
<select id = "test" name = "test" [(ngModel)] = "model.test" class = "form-control" [disabled] = "isDisabled()" formControlName = "test">
<option value = "1">1 - High</option>
<option value = "2">2 - Medium</option>
<option value = "3">3 - Low</option>
<option value = "4">4 - Negligible</option>
</select>
Да, это тоже была моя мысль, но я хотел по-прежнему иметь возможность использовать колесико мыши или клавиатуру для ввода значения каким-либо образом, я выберу это решение, если не смогу найти другой способ
Вы можете использовать атрибут списка на входе, как показано ниже.
<input id = "test" name = "test" type = "number" min = "1" max = "4" [(ngModel)] = "model.test" class = "form-control" [disabled] = "isDisabled()" formControlName = "test" list = "severity">
<datalist id = "severity">
<option value = "1"> High</option>
<option value = "2"> Medium</option>
<option value = "3"> Low </option>
<option value = "4"> Negligible</option>
</datalist>Я не использовал это решение, но оно кажется наиболее близким к тому, о чем я просил, спасибо!
Это заполнитель?