对于两个或多个字段，Angular Html5验证弹出窗口未显示

由于某些原因，如果我们添加两个或多个字段，则角度验证不会显示Html5巴伦/弹出窗口。

请检查以下两个示例：

只有一个字段的示例。按enter键验证字段，Html5 baloon/popup将显示：

https://plnkr.co/edit/oKePef7p4O4AD59eWXe8?p=preview

带有两个字段的示例。它不会在字段验证中显示Html5 baloon/popup

https://plnkr.co/edit/ZkDwB40Zhas3yjkT6AdM?p=preview

这里发生了什么！？

提前谢谢。

事实上，您的plnkrs都没有做任何事情，您正在尝试使用ngMessages模块，但没有出现任何类型的消息错误或任何内容。

看看这个简单的演示：

(function(angular) {
  'use strict';
  angular.module('ngMessagesExample', ['ngMessages']);
})(window.angular);

<!DOCTYPE html>
<html ng-app="ngMessagesExample">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.5.7/angular-messages.min.js"></script>
</head>
<body>
  <form name="form">
    <div class="col-md-12">
      <div class="form-group" ng-class="{ 'has-error' : form.myName.$touched && form.myName.$invalid }">
        <label for="name">Enter your name:</label>
        <input type="text" class="form-control" name="myName" id="name" ng-model="name" ng-minlength="5" ng-maxlength="20" required />
        <div class="help-block" ng-messages="form.myName.$error" ng-if="form.myName.$touched">
          <p ng-message="required">This field is required</p>
          <p ng-message="minlength">This field is too short</p>
          <p ng-message="maxlength">This field is too long</p>
          <p ng-message="required">This field is required</p>
          <p ng-message="email">This needs to be a valid email</p>
        </div>
      </div>
      <div class="form-group" ng-class="{ 'has-error' : form.myEmail.$touched && form.myEmail.$invalid }">
        <label for="email">Enter your email:</label>
        <input type="email" class="form-control" id="email" name="myEmail" ng-model="email" required />
        <div class="help-block" ng-messages="form.myEmail.$error" ng-if="form.myEmail.$touched">
          <p ng-message="required">This field is required</p>
          <p ng-message="minlength">This field is too short</p>
          <p ng-message="maxlength">This field is too long</p>
          <p ng-message="required">This field is required</p>
          <p ng-message="email">This needs to be a valid email</p>
        </div>
      </div>
    </div>
  </form>
</body>
</html>

我建议您查看教程以了解有关ngMessages的更多信息。

我希望它能有所帮助！

相关内容

最新更新

热门标签：