Question

出于某种原因，如果我们添加两个或更多字段，Angular验证不会显示Html5 baloon / popup。

请检查以下两个例子：

只有一个字段的示例。按回车键确认字段，Html5气球/弹出窗口将显示：

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

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

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

这里发生了什么！？

提前致谢。

Answer 1

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

看看这个简单的演示：

＆＃13;

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

＆＃13;

<!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>

＆＃13;

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

我希望它有所帮助！

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

1 个答案: