2016-07-20 6 views
0

Aus irgendeinem Grund zeigt Winkelvalidierung Html5 Ballon/Popups nicht, wenn wir zwei oder mehr Felder hinzufügen.Angular Html5 Validierungs-Popup wird nicht für zwei oder mehr Felder angezeigt

Bitte überprüfen Sie diese beiden Beispiele:

  1. Beispiel mit nur einem Feld. Drücken Sie Enter-Taste bestätigen Feld und Html5 baloon/Popup erscheint:

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

  1. Beispiel mit zwei Feldern. Es zeigt nicht Html5 Ballon/Popup bei Feldvalidierung.

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

Was hier passiert !?

Vielen Dank im Voraus.

+0

Keiner Ihrer Plunkr funktioniert wie Sie erwähnt haben. –

+0

Kasse diese Bibliothek https://github.com/sagrawal14/bootstrap-angular-validation –

+0

Ich benutze ng-Nachrichten und es funktioniert jetzt! Danke – NavCore

Antwort

1

In der Tat, nichts von Ihrem PLNKR tun nichts, Sie versuchen, ngMessages Modul zu verwenden, aber Sie haben keine Art von Fehlermeldung oder irgendetwas.

Werfen Sie einen Blick auf diese einfache Demo:

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

ich dir tutorial erfahren Sie mehr über ngMessages zu überprüfen, würde empfehlen.

Ich hoffe, es hilft!

+0

Großer Mann, ich habe nicht mit ng-Nachrichten versucht. Jetzt funktioniert es! Obwohl ich dachte, dass Html5 popup/baloon anstelle von ng-messages verwendet werden könnte, ist es aber egal. Danke – NavCore