在Firefox中页面加载时弹出AngularJS验证

Question

我使用了ng-required和ng-minLength等angularJS验证，并在$touched和$invalid true时显示。我使用UI路由在单个页面上显示幻灯片中的不同页面（使用ngAnimate）。当我们单击button移动到下一张幻灯片时，它会显示下一页的验证消息弹出窗口，如图所示。它显示页面加载时的验证消息弹出窗口。我在novalidate代码上使用了form，在formnovalidate使用了button，但根本没有使用。

<input type="email" class="form-control" placeholder="Email" ng-model="registration.email"
  name="email" ng-required="true" ng-class="{errorField: (personalInfoForm.email.$invalid
 && personalInfoForm.email.$touched) || isEmailError}" ng-blur="validateUserNameAvailability()"
  ng-pattern ="emailPattern" />
<div class="errorTooltip" ng-show="isEmailError">{{emailError}}</div>
<div ng-show="personalInfoForm.email.$invalid && personalInfoForm.email.$touched && !isEmailError">
    <div ng-show="personalInfoForm.email.$error.required" class="errorTooltip">
            {!$Label.Text_You_Must_Enter_A_Value}
    </div>
   <div ng-show="personalInfoForm.email.$error.email || personalInfoForm.email.$error.pattern" class="errorTooltip">
          {!$Label.Text_Please_Enter_Valid_Email}
  </div>
</div>

Answer 1

请为您发布表格的完整代码，但是从您对问题的描述中我猜测“下一步”按钮上使用的按钮类型必须转到下一张幻灯片

<input type="submit">Next</input>

将其更改为按钮。

<input type="button">Next</input>

您必须为所有幻灯片使用通用表单标记，并在最后一张幻灯片的末尾提交表单以保存数据。但是，通过在“下一步”按钮上使用按钮类型作为提交，表单将在每张幻灯片的末尾提交。如果我的分析是正确的，请告诉我。

Answer 2

我找到了解决此问题的方法。 Firefox加载angularJS因此在页面加载时显示所有验证消息，然后隐藏它们。 我在添加到ui-view的页面的开头添加了一个css行。

<style>.first-page{ display: none; }</style>

我已在页面末尾删除了此CSS。

<script>$('.first-page').css('display','block');</script>

我已在主要div页面上应用此类“第一页”。 这解决了我的问题。现在所有页面都在ui-view组件中完美加载。

注意：这也解决了幻灯片动画中的内容覆盖问题。 Firefox加载角度动画慢。我已将页面隐藏到完全加载。这解决了所有firefox问题。