Как убрать ng-сообщения при размытии?

Question

ПОЛОЖЕНИЕ:

У меня есть много форм в моих угловых приложениях и мне нужна эффективная система сообщений об ошибках. Я нахожу ngMessages полезным.

Но я бы хотел, чтобы сообщения об ошибках появлялись только тогда, когда пользователь вымывается из поля, чтобы быть менее агрессивным.

ПОПЫТКА:

Попытка с помощью дребезга на 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 секунды. Сообщение об ошибке может неожиданно появиться и запутать пользователя.

Но если я установил время debouncing 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>