web-dev-qa-db-fra.com

Déterminer si le formulaire est actif

Je fais la validation dans AngularJS, et j'ai un div qui est affiché s'il y a 3 types d'erreurs.

Pour requis, je souhaite afficher le message d'erreur uniquement si la page est soumise avec une valeur vide.

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

Pour la validation de regex, je veux qu’il signale le comportement par défaut en temps réel.

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

Le problème que je rencontre est avec minlength. Je ne veux pas le montrer pendant qu'ils tapent. C'est agaçant car ils n'ont pas fini de taper. Je ne veux pas l'afficher sur submit non plus, je pense que c'est trop tard. Je voudrais montrer quand ils ne sont plus au centre de l'élément.

Si //mainForm.email.$focus existait, je pouvais simplement le faire

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

Quelqu'un connaît-il un moyen de faire ce type de vérification ou une autre solution?

Merci!

angularjsvalidationfocusonchange
24
Proximo

 
voici le code

<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 and ngBlur take expression and ngShow shows upon true evaluation

48
Sahu

Pour en savoir plus sur ModelOptions, debounce et updateOn peuvent retarder un événement déclencheur de changement de modèle ou un changement déclencheur pour un événement DOM https://docs.angularjs.org/api/ng/directive/ngModelOptions

Vérifiez l'exemple sur la page

<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>
5
Issam Zoli

Une autre option simple est:

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