angularjs - 显示无效输入的错误消息

Question

我想在用户在文本字段中输入无效输入时显示错误消息。

现在我正在使用:

Pin:<input type="text" class="form-control input-sm" ng-pattern="numOnlyRegex" name="pin" ng-model="pin" required placeholder="Pin"/>
<span style="color:red" ng-show="myForm.pin.$invalid">Only number are allowed</span>
<input type="Submit" class="form-control btn btn-success" ng-disabled="myForm.$invalid" value="Submit" />

Controller :

<script>
            angular.module('myApp', []).controller("numOnlyRegex", function ($scope)
            {
                $scope.numOnlyRegex = /^\d+$/;
            });
        </script>

但我正在尝试的上述方式在输入文本字段下方显示了一条静态消息。我想要的是当用户输入字母而不是数字时，它应该显示错误消息，如“只允许使用数字”，否则它不应该显示任何错误消息。

ng-show 方法在输入为空时显示静态消息，但我只想在出现错误时显示错误(更现实的方式)

Answer 1

您可以在表单上使用 $error.pattern 来显示特定的错误消息

<span style="color:red" ng-show="myForm.pin.$error.pattern">Invalid Input</span>

以下是 $error 的其他一些例子

myForm.useremail.$error.email ==true 
   // When useremail field does not contain a real email.
myForm.username.$error.require ==true
   // Only if the username field is left blank.

这是 plunkr