Question

情况：

我的角度应用程序中有很多表单，我需要一个有效的错误消息系统。我觉得ngMessages很有用。

但我希望只有当用户模糊字段时才会出现错误消息，以便减少“侵略性”。

ATTEMPT：

尝试在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将评估为true。要检查模糊，您可以使用输入字段的$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>

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

2 个答案: