Comment ajouter une validation personnalisée à un formulaire Angular js?

Question

J'ai un formulaire avec des champs de saisie et de validation de l'installation par l'ajout de l' required attributs et ces. Mais pour certains domaines, j'ai besoin de faire quelques une validation supplémentaire. Comment pourrais-je le "robinet" pour la validation qu' FormController des contrôles?

Validation personnalisée pourrait être quelque chose comme "si ces 3 champs sont remplis, alors ce champ est obligatoire et doit être formaté de façon particulière".

Il y a une méthode en FormController.$setValidity mais qui ne ressemble pas à une API publique, donc je préfère ne pas l'utiliser. La création d'une coutume de la directive et à l'aide de NgModelController ressemble à une autre option, mais il suffisait de me demander de créer une directive pour chaque règle de validation personnalisée, que je ne veux pas.

En fait, le marquage d'un champ à partir du contrôleur comme non valide (tout en gardant FormController en synchronisation) pourrait être la chose que j'ai besoin dans le scénario le plus simple pour faire le travail, mais je ne sais pas comment faire.

Answer 1

Edit: ajout d'informations sur ngMessages (1.3.X beta) ci-dessous.

Standard de validation de formulaire messages (1.0.X et au-dessus)

Puisque c'est l'un des meilleurs résultats si vous faites une recherche Google "Angulaire de Validation de Formulaire", actuellement, je veux ajouter une autre réponse à ce pour les personnes à partir de là.

Il y a une méthode dans FormController.$setValidity mais qui ne ressemble pas à une API publique, donc je préfère ne pas l'utiliser.

C'est "public", pas de soucis. L'utiliser. Qu'est ce que c'est. Si ce n'était pas destiné à être utilisé, l'angle de devs auraient privatisée par une fermeture.

Pour faire une validation personnalisée, si vous ne voulez pas utiliser Angulaire de l'INTERFACE utilisateur comme les autres réponses proposées, vous pouvez simplement rouler vos propres validation de la directive.

app.directive('blacklist', function (){ 
   return {
      require: 'ngModel',
      link: function(scope, elem, attr, ngModel) {
          var blacklist = attr.blacklist.split(',');

          //For DOM -> model validation
          ngModel.$parsers.unshift(function(value) {
             var valid = blacklist.indexOf(value) === -1;
             ngModel.$setValidity('blacklist', valid);
             return valid ? value : undefined;
          });

          //For model -> DOM validation
          ngModel.$formatters.unshift(function(value) {
             ngModel.$setValidity('blacklist', blacklist.indexOf(value) === -1);
             return value;
          });
      }
   };
});

Et voici quelques exemple d'utilisation:

<form name="myForm" ng-submit="doSomething()">
   <input type="text" name="fruitName" ng-model="data.fruitName" blacklist="coconuts,bananas,pears" required/>
   <span ng-show="myForm.fruitName.$error.blacklist">
      The phrase "{{data.fruitName}}" is blacklisted</span>
   <span ng-show="myForm.fruitName.$error.required">required</span>
   <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>

Remarque: dans la 1.2.X il est probablement préférable de substituer ng-if pour ng-show ci-dessus

Ici est obligatoire plunker lien

Aussi, j'ai écrit quelques entrées de blog sur que ce sujet qui va dans un peu plus en détail:

Angulaire De La Validation Du Formulaire

Validation Personnalisée Directives

Edit: à l'aide de ngMessages en 1.3.X (beta)

Vous pouvez maintenant utiliser le ngMessages module au lieu de ngShow pour afficher vos messages d'erreur. Il sera effectivement travailler avec quoi que ce soit, il n'a pas à être un message d'erreur, mais voici l'essentiel:

1. Comprennent <script src="angular-messages.js"></script>

2. Référence ngMessages dans votre déclaration de module:

   var app = angular.module('myApp', ['ngMessages']);
   

3. Ajouter le marquage approprié:

   <form name="personForm">
     <input type="email" name="email" ng-model="person.email" required/>
   
     <div ng-messages="personForm.email.$error">
       <div ng-message="required">required</div>
       <div ng-message="email">invalid email</div>
     </div>
   </form>
   

Dans le balisage ci-dessus, ng-message="personForm.email.$error" essentiellement spécifie un cadre pour l' ng-message des enfants de directives. Ensuite, ng-message="required" et ng-message="email" spécifiez les propriétés de contexte à regarder. Plus important encore, ils ont aussi spécifier un ordre pour les archiver. Le premier qu'il trouve dans la liste qui est "truthy" qui l'emporte, et il affichera ce message et aucun des autres.

Et un plunker pour la ngMessages exemple

Answer 2

Le projet d'Angular-UI comprend une directive ui-validate, qui vous aidera probablement dans ce sens. Il vous permet de spécifier une fonction à appeler pour effectuer la validation.

Jetez un coup d'œil à la page de démonstration: http://angular-ui.github.com/ , recherchez l'en-tête Valider.

De la page de démonstration:

 <input ng-model="email" ui-validate='{blacklist : notBlackListed}'>
<span ng-show='form.email.$error.blacklist'>This e-mail is black-listed!</span>
 

puis dans votre contrôleur:

 function ValidateCtrl($scope) {
  $scope.blackList = ['bad@domain.com','verybad@domain.com'];
  $scope.notBlackListed = function(value) {
    return $scope.blackList.indexOf(value) === -1;
  };
}
 

Answer 3

Vous pouvez utiliser ng-required pour votre scénario de validation ("si ces 3 champs sont renseignés, alors ce champ est obligatoire":

 <div ng-app>
    <input type="text" ng-model="field1" placeholder="Field1">
    <input type="text" ng-model="field2" placeholder="Field2">
    <input type="text" ng-model="field3" placeholder="Field3">
    <input type="text" ng-model="dependentField" placeholder="Custom validation"
        ng-required="field1 && field2 && field3">
</div>
 

Answer 4

Vous pouvez utiliser Angulaire du programme de validation.

Exemple: à l'aide d'une fonction de validation d'un champ

<input  type = "text"
    name = "firstName"
    ng-model = "person.firstName"
    validator = "myCustomValidationFunction(form.firstName)">

Puis dans votre contrôleur, vous auriez quelque chose comme

$scope.myCustomValidationFunction = function(firstName){ 
   if ( firstName === "John") {
       return true;
    }

Vous pouvez aussi faire quelque chose comme ceci:

<input  type = "text"
        name = "firstName"
        ng-model = "person.firstName"
        validator = "'!(field1 && field2 && field3)'"
        invalid-message = "'This field is required'">

(where champ1 champ2, champ3 sur la portée des variables. Vous pourriez également vouloir vérifier si les champs n'est pas égal à la chaîne vide)

Si le champ ne passe pas de l' validator le champ sera marqué comme non valide et l'utilisateur ne sera pas en mesure de soumettre le formulaire.

Pour plus de cas d'utilisation et des exemples, voir: https://github.com/turinggroup/angular-validator

Avertissement: je suis l'auteur de Angulaire du programme de validation

Answer 5

Voici une façon cool de faire personnalisé expression générique validations dans un formulaire (à partir de: Avancée de validation de formulaire avec AngularJS et filtres):

<form novalidate="">  
   <input type="text" id="name" name="name" ng-model="newPerson.name"
      ensure-expression="(persons | filter:{name: newPerson.name}:true).length !== 1">
   <!-- or in your case:-->
   <input type="text" id="fruitName" name="fruitName" ng-model="data.fruitName"
      ensure-expression="(blacklist | filter:{fruitName: data.fruitName}:true).length !== 1">
</form>

app.directive('ensureExpression', ['$http', '$parse', function($http, $parse) {
    return {
        require: 'ngModel',
        link: function(scope, ele, attrs, ngModelController) {
            scope.$watch(attrs.ngModel, function(value) {
                var booleanResult = $parse(attrs.ensureExpression)(scope);
                ngModelController.$setValidity('expression', booleanResult);
            });
        }
    };
}]);

jsFiddle démo (prend en charge l'expression de nommage et de multiples expressions)

Il est similaire à l' ui-validate, mais vous n'avez pas besoin d'un champ d'application spécifique de la fonction de validation (cela fonctionne de manière générique) et bien sûr vous n'avez pas besoin de l'interface utilisateur.utils de cette façon.