显示无效输入的错误消息答案

【问题标题】：Showing error message for invalid input显示无效输入的错误消息
【发布时间】：2017-07-06 19:26:16
【问题描述】：

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

我现在正在使用：

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" />

控制器：

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

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

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

【问题讨论】：

您是否希望仅在用户输入错误时才显示错误消息（而不是在输入字段为空时显示？）
完成.. 这是plunkr

标签： angularjs

【解决方案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

【讨论】：

当我使用 $error.pattern 时，是否意味着我需要在控制器中声明一个模式？
不一定。您只需在其中一个表单元素中使用ng-pattern。您可以在那里提供您的正则表达式（而不是在控制器中编写）。喜欢<input type="text" ng-pattern="numOnlyRegex" />
所以如果我想像这样限制空格：ng-pattern="^\d+$/|/[^\s*]/" 那么我在每个输入行标记中都包含这个正则表达式？
我不能有一个全局正则表达式来删除所有输入文本字段中的空格吗？
这个myForm.$error.pattern 不正确，因为它是一个全局表单模式错误，它不是特定于该输入的

【解决方案2】：

Angular 允许您针对特定的错误。在这种情况下，您可以使用无效模式错误：

<span style="color:red" ng-show="myForm.pin.$error.pattern">Only number are allowed</span>

这样它只会在错误出现在模式验证时显示。

见this JSFIDDLE

【讨论】：

如果我想对多个输入字段进行限制，那么我是否必须拥有多个带有正则表达式模式的控制器？
如果您需要将模式应用于不同视图上的多个输入，您应该为此创建一个指令，每次都可以重复使用该指令
名字的错误模式不起作用。创建了一个 plunkr plnkr.co/edit/ywsZPrAtCv0cEak4Tocy?p=preview
您没有在名字字段中定义任何ng-pattern
所以我为每个字段定义了一个ng-pattern?

【解决方案3】：

angular.module('myApp',[]).controller('myFormController',['$scope',function($scope){
  $scope.myInputVal='';
}])

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<html>
  <body ng-app="myApp">
  <div ng-controller="myFormController">
     <form name="myForm" >
     <input type="text" ng-model="myInputVal" ng-pattern="/^[0-9]*$/" name="myInputVal"/>
     <span ng-show="myForm.myInputVal.$error.pattern">Only Numbers are allowed</span>
     <span ng-show="!myForm.myInputVal.$error.pattern">{{myInputVal}}</span>
     <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
     </form>
     </div>
  </body>

【讨论】：