Question

我遇到了一个问题，即ng-message正在闪烁所需的＆＃39;尽管输入框中有输入，但仍会显示错误消息。发生的事情是它非常简短地闪烁错误信息：＆＃34;这个领域是必需的（所有这些都是为了让它更容易看到它闪烁！）＆＃34;在屏幕消失之前立即消失。对不起，我想在消息消失之前让消息更容易看到。

这是link to my plunker。请输入任何输入，然后单击页面上的其他位置，以便输入字段失去焦点。 请注意，因为红色的错误消息会短暂闪烁然后消失。如果您没有注意到消息快速闪烁，则必须重新加载页面才能再次看到它。

为什么会这样？我认为它与ui-date有关，因为我没有ui-date就无法复制问题。

以下是代码片段：

<form name="reportform" ng-submit="process_form()" novalidate >
  <input name="startdate" placeholder="Enter a start date" ui-date ng-model="startdatevalue"  required>
  <ng-messages ng-if='reportform.startdate.$touched' for="reportform.startdate.$error">
    <ng-message when="required" class="error-message">
      THIS FIELD IS REQUIRED (ALL IN CAPS TO MAKE IT EASIER TO SEE IT FLASH BY!)
    </ng-message>
  </ng-messages>
  <button ng-disabled="reportform.$invalid" type="submit">
    Submit Query
  </button>
</form>

感谢您的帮助。

Answer 1

好的，这可能与您显示的特定错误消息相关，也可能不相关，并且仅在使用模板时似乎是一种解决方案。然而，在尝试了一些我遇到的事情之后：

ng-cloak

来自文档：

ngCloak指令用于防止浏览器在加载应用程序时以原始（未编译）形式短暂显示Angular html模板。使用此指令可避免由html模板显示引起的不良闪烁效应。

我将此添加到我的每个ngMessages div中，错误闪烁暂时消失，这是有道理的。

Answer 2

尝试：

<ng-messages ng-if='reportform.startdate.$touched && reportform.startdate.$modelValue' for="reportform.startdate.$error">
        <ng-message when="required" class="error-message" > 
          THIS FIELD IS REQUIRED (ALL IN CAPS TO MAKE IT EASIER TO SEE IT FLASH BY!)
        </ng-message>
      </ng-messages>

在拍摄错误之前，只需检查modelValue是否为空。

我建议您在开发期间检查模型中的值：

<pre>reportform.startdate.$error = {{reportform.startdate | json }}</pre>

Answer 3

把它剪掉一点。还要记住dots in ng-models!，需要考虑的事情。

<form name="reportform" ng-submit="process_form()" novalidate>
  <input name="startdate" placeholder="Enter a start date" ui-date ng-model="startdatevalue" required>
  <ng-messages for="reportform.startdate.$error">
    <ng-message when="required" class="error-message">
      THIS FIELD IS REQUIRED (ALL IN CAPS TO MAKE IT EASIER TO SEE IT FLASH BY!)
    </ng-message>
  </ng-messages>
</form>

看看是否有解决方法，我还没有测试过它。

Answer 4

当您在选择器中的某个日期上鼠标时，$touched正在更新，但是直到您鼠标移动后才更新模型。如果您点击日期并按住鼠标按钮，这是显而易见的。

解决此问题的一种方法（通常是hacky）是使用ui-date选项检查日期选择器是否已关闭，并在ng-messages ng-if中使用该选项。

... ui-date="dateOptions" ng-model="startdatevalue" required>

<ng-messages ng-if='reportform.startdate.$touched && selectionComplete' for="reportform.startdate.$error">

控制器中包含以下内容

 $scope.dateOptions = {
    onClose: function() { 
      $scope.$apply(function(){
        $scope.selectionComplete = true;
      })
    }
 }

更新了plnkr - https://plnkr.co/edit/vgfI8lTnkhDMU0yJ1FTA?p=preview

请注意，Github页面（https://github.com/angular-ui/ui-date）建议使用ui-bootstrap日期选择器作为替代方案。

使用angular-ui的ui-date datepicker时，屏幕上的角度错误消息会非常短暂地闪烁

4 个答案: