Angular7只允许数字输入接受2位数字

Question

我在数字输入上添加了max="99"和maxlength="2"，在键盘箭头向上时，它的上限为99，但如果用户使用键盘数字按钮输入数字，他们可以随心所欲地输入。我怎样才能防止这种情况发生。

HTML:

<input matInput formControlName="vacancyCount" type="number" min="0" max="99" maxlength="2" placeholder="Vacancies" (keyup)="checkValue()" required>

TS:

checkValue(){
// Prevent more that 2 digits
}

Answer 1

由于您只提供了一行，因此很难猜测您的项目配置，但更好的方法是自定义验证器，regex只接受两位数字，因为您可以重用代码

你可以使用这个Regex

^[0-9]{1,2}?$

Answer 2

您可以检查值是否大于99设置值为99或小于设置值为0，然后告诉用户"；你不能加超过99或小于0"；
只需手动

Answer 3

您应该使用角度形式验证。如果用户输入的值大于最大值或小于最小值，则显示错误。有关角度形状验证指南，请参见此。

Answer 4

使用ngx-mask库可以轻松实现这一点。

<input type="text" mask="00" [validation]="true" />

Stacklitz在这里