Question

我可以看到以下建议，建议只使用数字的文本框：

 <input  formControlName="imo" class="form-control" pattern="\d*" maxlength="8">

但是对我来说，我可以输入字符，而不仅限于数字。我正在使用最新版本的Crome。这是Angular应用程序中formControlName的副作用，还是我误解了模式部分？

Answer 1

pattern仅检查该值是否有效，它不会干扰用户输入的内容。如果您只允许数字值，并且输入的数字不超过5（如您在注释中所述），则可以执行以下操作：

<input type="text" formControlName="imo" (keypress)="checkValue($event)">

和功能：

checkValue(event) {
  return event.target.value.length === 5 ? event.preventDefault() : 
    String.fromCharCode(event.charCode).match(/[^0-9]/g) === null
}

StackBlitz

这实际上将阻止输入。如果不阻塞值是合适的，则可以继续使用Validators.pattern()，然后在用户键入不应输入的内容时显示错误消息。

Answer 2

我认为这就是您想要的：

atomic

Answer 3

你好，你在下面试过了吗

\ d +而不是\ d *

仅包含数字的文本框

3 个答案: