Angular - 支持最小值和最大值的反应形式的数字掩码

【问题标题】：Angular - Number mask for reactive forms that supports min and max valuesAngular - 支持最小值和最大值的反应形式的数字掩码
【发布时间】：2020-03-06 02:40:09
【问题描述】：

我需要确保在输入文本中只输入数字。我一直使用angular2-text-mask，但现在我还必须确保有限制。最小值和最大值。假设最小值为 1500，最大值为 16000。如果输入的数字小于 1500，则该值将替换为 1500。如果输入的数字大于 16000，则该数字将替换为 16000。我知道我可以使用表单验证，但这不是 UI 的设计方式。

除了最低和最高要求外，我已经用这个面具满足了我的大部分需求。你知道我怎样才能得到这个结果吗？

【问题讨论】：

您可以使用 (blur) 事件来检查值并根据您的要求进行更改

标签： angular angular-validation input-mask text-mask

【解决方案1】：

替代方案可以是 ViewChild。

0) 在输入上放置一个模板引用以便能够引用它。

<input #myNumInput>

在 ts 中：

@ViewChild('myNumInput') mynuminput: ElementRef;

1) 注册输入的keyup事件。

<input #myNumInput (keyup)="onInputKeyup(#myNumInput.value)">

2) 在onInputKeyup 函数中，检查给定的值，如果超出您试图限制的范围，请使用 viewchild 进行调整：

`if (value < 1500)
    this.mynuminput.value = 1500
 else if (value > 16000)
    this.mynuminput.value = 16000`

【讨论】：