Question

我有一个表单控件，用户必须输入Id。我已经验证了提交按钮，只有当字段填充了值（仅限数字）时才启用。

<input type="text" ng-model="Movie_Id" name="Movid" ng-pattern="onlyNumbers" required/>
<input type="submit" value="Add" ng-disabled="adduserform.$invalid" data-ng-click="Save()"/>

但我想在用户输入“你应该只输入数字”这样的字母时动态通知用户，因为用户可能不知道提交按钮在输入字母时被禁用的原因。

Answer 1

为此，您可以使用字段级$error属性形式的$error属性。

<form name="adduserform">
  <input type="text" ng-model="Movie_Id" name="Movid" ng-pattern="onlyNumbers" required/>
  <span ng-show="adduserform.Movid.$invalid"> Only number are allowed</span>
  <input type="submit" value="Add" ng-disabled="adduserform.$invalid" data-ng-click="Save()"/>
</form>

在上面的示例中，我使用了adduserform.Movid.$invalid，它会告诉我们Movid是否为有效字段，＆amp;如果它无效，则会显示验证消息。

<强>更新

由于我们希望显示两个不同的错误，我们可以使用$error.required来获取所需的错误＆amp; $error.pattern让模式匹配与否

<强>标记

<span style="color:red" ng-show="adduserform.Movid.$dirty && adduserform.Movid.$invalid"> <br /> 
  <span ng-show="adduserform.Movid.$error.required" class="spnmsg">Field must not be empty</span> 
  <span ng-show="adduserform.Movid.$error.pattern">Only Numbers</span> 
</span>

Working Plunkr

如何在Angular / HTML中动态加载验证错误

1 个答案: