如何验证 Angular 2 中的输入

Question

I have an input place and I want this input to have length from 3 to 7 and not allow special characters.

<input  required maxlength="7" minlength="3" class="plate"  type="text"  #a>

I tried this but I want to print a message just when I leave the input place whithout having filling it properly

Answer 1

You can add the pattern attribute with an appropriate regex pattern, like this:

pattern="[A-Za-z0-9]{3,7}"

Full input example:

 <input required class="plate" type="text" pattern="[A-Za-z0-9]{3,7}" #a>

To validate the input:

for simplicity, you can use input:invalid CSS selector:

 <input required class="plate" type="text" pattern="[A-Za-z0-9]{3,7}" #a> <span class="validation-msg">Not Valid</span>.validation-msg { display: inline-block; } input:invalid { color: red; } input:invalid ~.validation-msg { display: inline-block; }

or for something powerful use template form. https://angular.io/guide/forms