如何验证 Angular 2 中的输入答案

【问题标题】：How to validate an input in Angular 2如何验证 Angular 2 中的输入
【发布时间】：2020-09-30 23:48:29
【问题描述】：

我有一个输入位置，我希望这个输入的长度在 3 到 7 之间，并且不允许使用特殊字符。

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

我试过了，但我想在我离开输入位置时打印一条消息，而没有正确填写它

【问题讨论】：

angular.io/guide/form-validation
ng-model 不是有效的 Angular 语法。您确定您查看的是正确的文档吗？
@Anna “不允许特殊字符”是什么意思。 ?

标签： angular validation input

【解决方案1】：

您可以使用适当的正则表达式模式添加模式属性，如下所示：

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

完整输入示例：

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

验证输入：

为简单起见，您可以使用 input:invalid CSS 选择器：

<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;
  }

或者对于功能强大的东西使用模板表单。 https://angular.io/guide/forms

【讨论】：

非常感谢您。我也希望不要让我离开盒子，如果我输入不符合限制的“@#%FFfjkhvjfhjdhgkjsdhk”之类的内容并打印错误消息