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

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

Пожалуйста, помогите мне


validation angularjs angularjs-forms
person Sivabalan    schedule 16.07.2015    source источник
comment
Вы можете описать свою проблему немного больше? что вы сделали, чтобы скрыть сообщение об ошибке?   -  person ssbb    schedule 16.07.2015
comment
Теперь я обновил вопрос   -  person Sivabalan    schedule 16.07.2015
comment
Можете ли вы создать скрипку для этой проблемы?   -  person Abhishek Prakash    schedule 16.07.2015
comment
Рассмотрите возможность использования ng-focus docs.angularjs.org/api/ng/directive/ngFocus   -  person Okazari    schedule 16.07.2015

Ответы (3)


arrow_upward
3
arrow_downward

это просто трюк, попробуйте, если это сработает:

<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: при нажатии кнопки «Отправить» сделайте focus = false;

person manoj    schedule 16.07.2015
comment
вы пробовали focus = false при отправке? - person manoj; 16.07.2015

arrow_upward
0
arrow_downward

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

person Girdhar Singh Rathore    schedule 16.07.2015

arrow_upward
0
arrow_downward

используйте 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>
person Jerin George    schedule 23.11.2018