Скрыть сообщение об ошибке в текстовом фокусе в angularjs

Question

Я новичок 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>

Пожалуйста, кто-нибудь, помогите мне

Answer 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>

NB: при нажатии на кнопку отправить, сделайте фокус = ложным;

Answer 2

Я думаю, вы забыли упомянуть ng-app директива

Answer 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>