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

Question

Я выполняю проверку в 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"/> 

Любой знает любой способ сделать этот вид проверки или любой не вытягивается альтернативы?

Спасибо!

Answer 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 показывает на истинной оценки

Answer 2

Вы должны прочитать о ModelOptions, дребезг и 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> 

Answer 3

Еще один простой вариант:

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