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

Question

我遇到了一个问题,即尽管输入框中有输入,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>

谢谢你的帮助.

Answer 1

尝试一下：

<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 是否不为 null。

我建议您在开发过程中也检查模型中的值：

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