Question

我对angularjs的输入验证有问题。这是一个有效的Plunker来演示它。

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模块时才会发生这种情况。我不能删除它，因为我需要它用于其他目的。我怎样才能摆脱这种不必要的验证动画？

Answer 1

如果从表格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>

角度验证消息随ngAnimate和ngForm

1 个答案: