Angular驗證信息閃爍與ngAnimate和ngForm

我有一個angularjs的輸入驗證問題。這是一個工作Plunker來演示它。Angular驗證信息閃爍與ngAnimate和ngForm

HTML：

<html ng-app="myApp"> 
<head> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script> 
    <script src="script.js"></script> 
</head> 
<body ng-controller="ctrl"> 
    <form> 
    <div ng-form="myForm"> 
     <input name="myInput" ng-model="name" required> 
     <br> 
     <span style="color: red;" ng-if="myForm.myInput.$error.required">This param is missing</span> 
     <span style="color: red;" ng-if="!myForm.myInput.$error.required">This param is not missing</span> 
    </div> 
    </form> 
</body> 
</html>

的script.js：

angular.module('myApp', ['ngAnimate']). 
    controller('ctrl', function ($scope) { 

    });

此代碼是有點做作，但它顯示的是什麼問題。我必須使用ngForm，因爲在我的項目中，表單字段是使用ngRepeat動態生成的。無論如何，請嘗試在輸入內輸入內容，然後清除它，然後您會看到驗證跨越的閃爍。它僅在注入myApp的ngAnimate模塊時發生。我無法刪除它，因爲我需要它用於其他目的。我怎樣才能擺脫這種不需要的驗證動畫？

來源

2016-01-21 Sergey Volkov

似乎工作正常。 –

@HamletHakobyan - 我想他是在談論兩國之間的不必要的閃爍，因爲它似乎是一個簡短的例子，這兩個ng聲明是真的 – DeclanMcD

@HamletHakobyan - DeclanMcD是正確的，就好像有一刻，兩個ng-如果是真正。嘗試從javaScript中刪除'ngAnimate'注入，你會看到不同之處。 –

如果從窗體div中取出兩個span標籤，它將按預期工作。

<html ng-app="myApp"> 
    <head> 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script> 
     <script src="script.js"></script> 
    </head> 
    <body ng-controller="ctrl"> 
     <form> 
     <div ng-form="myForm"> 
      <input name="myInput" ng-model="name" required> 
      <br> 

     </div> 

<span style="color: red;" ng-if="myForm.myInput.$error.required">This param is missing</span> 
      <span style="color: red;" ng-if="!myForm.myInput.$error.required">This param is not missing</span> 
     </form> 
    </body> 
    </html>

來源

2016-01-21 09:55:14 DeclanMcD

這解決了這個問題。非常感謝你！ –

Angular驗證信息閃爍與ngAnimate和ngForm

回答

相關問題