如何在模糊时触发 ng-messages？

Question

情况：

我的 angular 应用程序中有很多表单，我需要一个有效的错误消息系统。我发现 ngMessages 有用。

但我希望只有当用户模糊了某个字段时才会出现错误消息，以便减少 'aggressive'。

尝试：

尝试在 1000 毫秒处使用去抖

<label class="item item-input">
    <span class="input-label"> Email alternative </span>
    <input type="email" name="email_alternative" ng-model="profile_edited.email2" ng-model-options="{ debounce: 1000 }">
</label>

<!-- Error messages for ALTERNATIVE EMAIL  -->
<label class="item item-input" ng-show="profile_edit_form.email_alternative.$error.email">
    <div class="form-errors" ng-messages="profile_edit_form.email_alternative.$error" role="alert" ng-if='profile_edit_form.email_alternative.$dirty'>
        <div class="form-error" ng-message="email">Your email address is invalid</div>
    </div>
</label>

这样，如果用户在一秒钟内没有输入任何内容，它将正确显示错误消息。 是最接近我想要的。

但有时对于某些用户来说，输入字符@可能需要 1 秒多一点的时间。错误消息可能会突然出现并使用户感到困惑。

但是如果我将去抖动时间设置为 2 或 3 秒就太多了。当用户已经在另一个字段中书写时，它可能会出现。

我需要错误消息仅在用户模糊离开该字段后触发。

问题：

如何在模糊时触发 ngMessages？

Answer 1

如果输入框中的文本发生更改，

$dirty 将评估为真。要检查模糊，您可以使用输入字段的 $touched 属性。

查看表单文档以查看所有表单（输入）属性：https://docs.angularjs.org/guide/forms

Answer 2

您可以使用 $dirty 和 ng-show 在输入脏时显示消息。

<input type="text" name="modelName" ng-model="modelName" required />
<div ng-messages="myForm.modelName.$error" ng-show="myForm.modelName.$dirty">
    <div ng-message="required">Please Fill this model.</div>
</div>