Flicker mit ngMessages und ngShow

Question

auf einem Formular mit required -Validierung und ng-messages I ng-show verwenden, um die Richtlinie beim Start zu verstecken und zeigt nur Fehlermeldungen nach dem Eingang ng-dirty bekam.

Um noch das Element zu halten es ist Platz im Layout Kalender I CSS-Regel haben nach dem Standard ng-hide Verhalten zu überschreiben:

ng-messages.ng-hide:not(.ng-hide-animate), [ng-messages].ng-hide:not(.ng-hide-animate) 
{ 
    display: block !important; 
    visibility: hidden; 
} 

Wenn ich jetzt Text in das Feld Nachricht die Fehlereingang betreten ist kurz sichtbar vor Es wird dann wieder ausgeblendet (weil das erforderliche Feld ausgefüllt ist). Es fühlt sich irgendwie so an, als ob ng-dirty aufgelöst wird, bevor die Formularvalidierung durchgeführt wird, was zu diesem Verhalten führt.

Siehe this Fiddle

oder

-Code überprüfen:

var $scope; 
 
var app = angular.module('myapp', ['ngMessages', 'ngAnimate']); 
 
app.controller('UserCtrl', ['$scope', UserCtrl]); 
 

 
function UserCtrl($scope) { 
 
    $scope.showField = true; 
 
    $scope.reset = function() { 
 
     var master = { name: '' }; 
 
     $scope.temp = angular.copy(master); 
 
     $scope.user_form.$setPristine(); 
 
    } 
 
}

ng-messages.ng-hide:not(.ng-hide-animate), [ng-messages].ng-hide:not(.ng-hide-animate) 
 
{ 
 
    display: block !important; 
 
    visibility: hidden; 
 
} 
 

 
ng-messages, [ng-messages] 
 
{ 
 
    display: block; 
 
    height: 1em; 
 
} 
 

 
input 
 
{ 
 
    display: block; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.5.5/angular-messages.min.js"></script> 
 

 
<div ng-app="myapp"> 
 
    <div ng-controller="UserCtrl"> 
 
     <form name="user_form" novalidate> 
 
      <input name="name" ng-model="temp.name" ng-show="showField" placeholder="Name" required autocomplete="off"/> 
 
      <ng-messages ng-show="user_form.name.$dirty" for="user_form.name.$error"> 
 
       <ng-message when="required"> 
 
       Please enter your name 
 
       </ng-message> 
 
      </ng-messages> 
 
      <button type="button" class="button" ng-click="reset()">Reset</button>  
 
     </form> 
 
     <p> 
 
      Pristine: {{user_form.$pristine}} 
 
     </p> 
 
     
 
     <pre>Errors: {{user_form.$error | json}}</pre> 
 
       
 
    </div> 
 
</div>

Answer 1

<ng-messages ng-show="user_form.name.$dirty && !user_form.name.$valid" for="user_form.name.$error">