在angularjs中隐藏文本焦点上的错误消息答案

【问题标题】：Hide error message on text focus in angularjs在angularjs中隐藏文本焦点上的错误消息
【发布时间】：2018-11-23 20:02:52
【问题描述】：

我是 angularjs 的初学者。我刚开始进行表单验证。一切正常，直到我试图隐藏输入焦点上的错误消息。

当我点击提交按钮时，它会显示错误消息。在我专注于文本框后，它必须隐藏错误消息

这是我的代码：

  <form name="form" novalidate>
        <div>
            <label>Username</label>
            <input type="text" name="username" ng-model="username" ng-required="true" ng-minlength="5" ng-maxlength="7"/>

            <span class="errors" ng-show="(form.$submitted || form.username.$touched) && form.username.$error.required">Please fill username</span>
            <span class="errors" ng-show="form.username.$error.minlength">Username too short</span>
            <span class="errors" ng-show="form.username.$error.maxlength">Username too long</span>
        </div>
  </form>

请有人帮助我

【问题讨论】：

你能再描述一下你的问题吗？你做了什么来“隐藏”错误信息？
现在我更新了问题
你能解决这个问题吗？
考虑使用 ng-focus docs.angularjs.org/api/ng/directive/ngFocus

标签： angularjs validation angularjs-forms

【解决方案1】：

这只是一个技巧，如果可行，请尝试：

<form name="form" novalidate>
    <div>
        <label>Username</label>
        <input type="text" name="username" ng-model="username" ng-required="true" ng-minlength="5" ng-maxlength="7" ng-focus="focused=true"/>

        <span class="errors" ng-show="(form.$submitted || form.username.$touched) && form.username.$error.required && !focused">Please fill username</span>
        <span class="errors" ng-show="form.username.$error.minlength && !focused">Username too short</span>
        <span class="errors" ng-show="form.username.$error.maxlength && !focused">Username too long</span>
    </div>
</form>

注意：点击提交时，将焦点设为 false；

【讨论】：

您在提交时是否尝试过focused = false？

【解决方案2】：

我猜你忘了提到ng-app指令

【讨论】：

【解决方案3】：

使用 ng blur 在刚离开输入字段时显示即时消息：

<form name="form" novalidate>
    <div>
        <label>Username</label>
        <input type="text" name="username" ng-model="username" ng-required ng-minlength="5" ng-maxlength="7" ng-blur="focused=false" ng-focus="focused=true"/>

        <span class="errors" ng-show="(form.$submitted || form.username.$touched) && form.username.$error.required && !focused">Please fill username</span>
        <span class="errors" ng-show="form.username.$error.minlength && !focused">Username too short</span>
        <span class="errors" ng-show="form.username.$error.maxlength && !focused">Username too long</span>
    </div>
</form>

【讨论】：