在数字输入中显示文本（与值相关联）

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

您可以在输入中使用list属性，如下所示

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

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