仅包含数字的文本框

Question

I can see all over following suggestion is recommended for having a textbox with numbers only:

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

But for me I can enter characters and are not restricted to numbers only. I am using latest version of Crome. Is this a side affect of the formControlName in my Angular app or have I misunderstod the pattern part?

Answer 1

pattern just checks if the value is valid or not, it does not interfere with what user is typing. If you want to allow only numeric values, and that digits entered aren't more than 5 (as you say in comment), then you can do this:

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

and the function:

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

StackBlitz

This will actually block the input. If it's suitable with not blocking values, you can go ahead and use Validators.pattern() and then just show an error message when user types something they shouldn't.

Answer 2

我认为这是您要寻找的：

<input type="number" formControlName="imo" class="form-control" min="1" max="5">

Answer 3

Hello have you tried this below

\\d+ instead of \\d*