Valider le champ de saisie sur le flou avec Angular

J'ai fait un simple test de champs de saisie, Mais j'essaie de convertir la validation sur le flou, Mais je n'ai pas d'idée pour arriver à cela, puisque je ne suis pas si familier avec angularjs.

un m'aider à valider seulement un flou dans cet exemple, s'il vous plaît..

myJs:

angular.module('myApp', [])
.controller('FormController', function($scope) {
  $scope.fields = [
    {placeholder: 'Username', isRequired: true},
    {placeholder: 'Password', isRequired: true},
    {placeholder: 'Email (optional)', isRequired: false}
  ];

  $scope.submitForm = function() {
    alert("it works!");
  };
});

html:

<div ng-app="myApp">
<form name="signup_form" ng-controller="FormController" ng-submit="submitForm()" novalidate>
  <div ng-repeat="field in fields" ng-form="signup_form_input">
    <input type="text"
           name="dynamic_input"
           ng-required="field.isRequired"
           ng-model="field.name"
           placeholder="{{field.placeholder}}" />
    <div ng-show="signup_form_input.dynamic_input.$dirty && signup_form_input.dynamic_input.$invalid">
      <span class="error" ng-show="signup_form_input.dynamic_input.$error.required">The field is required.</span>
    </div>
  </div>
  <button type="submit" ng-disabled="signup_form.$invalid">Submit All</button>
</form>
</div>

Démonstration En Direct

source d'informationauteur 3gwebtrain

11

Vous pouvez simplement créer une directive qui a le même nom que ngModel. Ajouter un blur événement sur l'élément qui change la $dirty état de la ngModel de vrai. Assurez-vous de changer ngModel's $dirty état à false lorsque des modifications sont apportées sur l'élément par l'ajout d'un rappel à l'intérieur de ngModel.$viewChangeListeners tableau.

FOURCHE DE L'ÉCHANTILLON

La directive ressemble à quelque chose comme ceci:
```
.directive('ngModel', function() {
    return {
        require: 'ngModel',
        link: function(scope, elem, attr, ngModel) {
            elem.on('blur', function() {
                ngModel.$dirty = true;
                scope.$apply();
            });

            ngModel.$viewChangeListeners.push(function() {
                ngModel.$dirty = false;
            });

            scope.$on('$destroy', function() {
                elem.off('blur');
            });
        }
    }
});
```
Note: Ne vous inquiétez pas si la coutume nom de la directive, ngModelest la même Angulaire par défaut de ngModelil suffit d'exécuter deux d'entre eux (ne pas l'écraser). Le scope.$on('$destroy') à l'écoute, supprime le blur gestionnaire d'événement lorsque la portée est détruite, par exemple lors de changements de route et que le contrôleur est détruit ou lorsqu'un champ est supprimé ce qui déclenche une reconstruction de la répétition des éléments du DOM à nouveau(en détruisant l'enfant du champ créé par ng-repeat).

Si vous mettez à jour Angulaire 1.3 vous pouvez utiliser ng-model-options de mettre à jour le modèle sur le flou.

<input type="text"
       name="dynamic_input"
       ng-required="field.isRequired"
       ng-model="field.name"
       ng-model-options="{ updateOn: 'blur' }"
       placeholder="{{field.placeholder}}" />

violon

Toutefois, si vous ne pouvez pas mettre à jour, alors il ya beaucoup de façons de le faire ici.

            angular.module('myApp', [])
        .controller('FormController', function($scope) {
             $(document).ready(function(){
                $("#form input").on('blur', function(){
                    alert("Cannot be null");
                });
            });
          $scope.fields = [
            {placeholder: 'Username', isRequired: true},
            {placeholder: 'Password', isRequired: true},
            {placeholder: 'Email (optional)', isRequired: false}
          ];

          $scope.submitForm = function() {
            alert("it works!");
          };

        });

juste donner l'id de la forme et ajouter le code javascript. C'est tout. Pour la version " démo "http://jsfiddle.net/SaurabhGhewari/2ko9bamk/"

1

Si vous avez une validation personnalisée, une façon simple est d'aller à l'aide de ngBlur. Ajoutez les lignes suivantes à votre domaine et d'écrire une fonction de validation de votre contrôleur:
```
<input type="text"
       ng-model="fieldVal" 
       ng-blur="validate(fieldVal)"/>
```
Vous pouvez également utiliser ng-modèle-options combinées avec ng-changement
```
<input type="text" 
       ng-modle="fildsVal" 
       ng-model-option="{ updateOn: 'blur' }" 
       ng-change="validate(fieldVal)" />
```
J'ai aussi trouvé l'anti-rebond option très agréable pour déclencher la validation. Vous pouvez de temps de sorte que lorsque l'utilisateur est fini la saisie, la validation déclenche:
```
<input type="text"
       ng-model-options="{ debounce: 800 }" 
       ng-pattern="/^[0-9]{1,9}$/" />
```

Vous devez vous connecter pour publier un commentaire.