angularjs - reactivos - Determine si la entrada de formulario tiene foco

validar formulario angular 5

Question

Estoy haciendo validación en AngularJS, y tengo un div que se muestra si hay 3 tipos de errores.

Para el requerido, quiero mostrar el mensaje de error solo si la página se envía con un valor vacío

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

Para la validación de expresiones regulares, quiero que marque el comportamiento predeterminado en tiempo real.

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

El problema que estoy enfrentando es con minlength. No quiero mostrarlo mientras están escribiendo. Es molesto porque no han terminado de escribir. No quiero mostrarlo en el envío tampoco, creo que es demasiado tarde. Me gustaría mostrarlo cuando ya no están en el foco del elemento.

Si existiera //mainForm.email.$focus, simplemente podría hacer esto

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

¿Alguien sabe de alguna manera de hacer este tipo de cheque o alguna alternativa no realizada?

¡Gracias!

Answer 1

Debe leer sobre ModelOptions, debounce y updateOn puede retrasar el evento de activación del cambio de modelo o el cambio en el evento DOM https://docs.angularjs.org/api/ng/directive/ngModelOptions

Consulta el ejemplo en la página.

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

Otra opción simple es:

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

Answer 3

Si lo hace
Puedes usar ngFocus y ngBlur para este propósito

aquí está el código

<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 y ngBlur toman expresión y ngShow se muestran tras una verdadera evaluación