6

我遇到了一个问题，尽管输入框中有输入，但 ng-message 正在闪烁“必需”错误消息。发生的情况是，它在屏幕上非常短暂地闪烁错误消息：“此字段是必需的（全部大写以使其更容易看到它闪烁！）”在它立即消失之前在屏幕上。对大写感到抱歉，但我想让消息在消失之前更容易看到。

这是我的 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>

谢谢你的帮助。

4

4 回答 4

1

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

ng-cloak

从文档中：

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

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

于 2016-12-28T19:03:11.163 回答
0

把它剪下来一点。还要记住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>

看看能不能解决，虽然我没测试过。

于 2016-04-19T09:49:29.600 回答
0

发生的情况是，$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 日期选择器作为替代方案。

于 2016-04-19T10:32:05.913 回答
0

试试看：

<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>
于 2016-04-19T09:43:01.440 回答