角Html5的驗證彈出窗口不顯示的兩個或多個字段

出於某種原因，角度驗證沒有顯示，如果我們添加兩個或多個字段Html5氣球/彈出窗口。只有一個場角Html5的驗證彈出窗口不顯示的兩個或多個字段

例子：

請檢查這兩個例子。按回車鍵以驗證字段和HTML5氣球/彈出將顯示：

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

實施例有兩個字段。它不會在字段驗證中顯示Html5 baloon/popup。

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

這裏發生的事情！？

在此先感謝。

來源

2016-07-20 NavCore

關你plunkr人正在像你提到的。 –

結帳這個庫https://github.com/sagrawal14/bootstrap-angular-validation –

我使用的是NG的消息，它的工作吧！由於 – NavCore

事實上，您的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>

我建議你檢查這tutorial更多地瞭解ngMessages。

我希望它有幫助！

來源

2016-07-20 20:49:18 developer033

大男人，我沒有NG的消息試試。現在正在工作！雖然我認爲Html5的彈出/氣球可以代替NG-消息，但沒關係..謝謝 – NavCore

角Html5的驗證彈出窗口不顯示的兩個或多個字段

回答

相關問題