Определите, имеет ли фокус формы

Я выполняю проверку в AngularJS, и у меня есть div, который отображается, если есть 3 типа ошибок.

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

<div class="error" data-ng-show="submitted && mainForm.email.$error.required" />

Для проверки регулярного выражения я хочу, чтобы он отображал поведение по умолчанию в режиме реального времени.

<div class="error" data-ng-show="mainForm.email.$error.pattern" />

Проблема, с которой я столкнулась, - с minlength. Я не хочу показывать это, пока они печатают. Это раздражает, потому что они еще не закончили печатать. Я не хочу показывать его на отправке, думаю, слишком поздно. Я хотел бы показать это, когда они больше не находятся в фокусе элемента.

Если существовал //mainForm.email.$focus, я мог бы просто сделать это

<div class="error" data-ng-show="mainForm.email.$error.minlength && 
!mainForm.email.$focus"/>

Кто-нибудь знает какой-либо способ сделать такую проверку или любую непритянутую альтернативу?

Спасибо!

Ответ 1

Да, он делает вы можете использовать ngFocus и ngBlur для этой цели

вот код

<form name="mainForm">
    <span ng-show="mainForm.email.$error.pattern && !focus">error here</span>
    <input name="email" ng-pattern="..." ng-focus="focus=true" ng-blur="focus=false" type="text" />
</form>

ngFocus и ngBlur принимают выражение, а ngShow показывает истинную оценку

Ответ 2

Вам нужно прочитать о ModelOptions, debounce и updateOn, чтобы отложить изменение триггера изменения модели или смена триггера в событии DOM https://docs.angularjs.org/api/ng/directive/ngModelOptions

Посмотрите пример на странице

<div ng-controller="ExampleController">
  <form name="userForm">
    Name:
    <input type="text" name="userName"
           ng-model="user.name"
           ng-model-options="{ updateOn: 'blur' }"
           ng-keyup="cancel($event)" /><br />

    Other data:
    <input type="text" ng-model="user.data" /><br />
  </form>
  <pre>user.name = <span ng-bind="user.name"></span></pre>
</div>

Ответ 3

Еще одна простая опция:

 <input type="text"
        name="searchText"
        ng-model="searchText"
        ng-blur="searchIsInActive()"
        ng-click="searchIsActive()"                  
        placeholder="Search">