javascript - 在数字输入中显示文本(与值关联)

Question

假设我有一个数字输入，其中只有几个可能的值，如下所示:

<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 之间的整数，然后将值从文本转换为数字，然后再将其发送到我的后端

Answer 1

您可以像下面这样在输入上使用列表属性

<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>