Nettoyage logique de validation

Question

Je viens de validation fonctionne comme je veux avec le code suivant:

<div class="control-group" ng-class="{ error : (submitted || accountForm.name.$dirty) && accountForm.name.$invalid }"> 
    <label for="name" class="control-label">Company Name:</label> 
    <input type="text" name="name" ng-model="account.name" ng-maxlength="50" required /> 
    <span class="help-inline" ng-show="(submitted || accountForm.name.$dirty) && accountForm.name.$error.maxlength">Name too long</span> 
    <span class="help-inline" ng-show="(submitted || accountForm.name.$dirty) && accountForm.name.$error.required">Required</span> 
</div> 

Mais il semble y avoir beaucoup de code similaire avec des différences que de légères. Quelle serait la meilleure méthode pour simplifier cela pour a) plus clair, b) plus facile à maintenir?

Mise à jour 23/07 Il ne semble pas qu'il y ait une meilleure pratique immédiate.

Answer 1

Vous pouvez créer une variable d'erreur dans le $scope du contrôleur qui contrôle ce modèle. Quelque chose comme ceci:

html

<div ng-controller="FormCtrl" class="control-group" ng-class="{ error : (submitted || accountForm.name.$dirty) && accountForm.name.$invalid }"> 
    <label for="name" class="control-label">Company Name:</label> 
    <input type="text" name="name" ng-model="account.name" ng-maxlength="50" required /> 
    <input type="button" ng-click="submitForm()" /> 
    <span class="help-inline">{{ error }}</span> 
</div> 

contrôleur

window.FormCtrl = function ($scope) { 
    $scope.error = ""; 

    $scope.submitForm = function() { 
     if ($scope.accountForm.name.length > 50) { 
      $scope.error = "Name too long"; 
     } 
     else if ($scope.accountForm.name == null || $scope.accountForm.name == undefined) { 
      $scope.error = "Name required"; 
     } 
     else { 
      $scope.error = ""; 
      //submit logic 
     } 
    } 
} 

Answer 2

Puisque vous souhaitez réutiliser le même code pour d'autres champs de formulaire, et la logique de validation semble être similaire pour chacun d'eux, je ne pouvais rien trouver avec ngForm qui aiderait à réutiliser le code. Je suggérerais plutôt une approche différente, où vous n'utilisez pas ngForm et faites vous-même la validation dans js. De cette façon, vous pouvez réutiliser la méthode partout.

Voici le lien pour le jsFiddle: http://jsfiddle.net/rCDg8/1/

<div ng-app> 
    <div ng-controller="DemoCtrl"> 
     <form name="accountForm" ng-submit="submit()"> 
      <div class="control-group" ng-class="class"> 
       <label for="name" class="control-label">Company Name:</label> 
       <input type="text" name="name" ng-model="account.name" ng-change="validateEntry(account.name)" required></input> 
       <span class="help-inline" ng-show="accountForm.$dirty||accountForm.$invalid">{{msg}}</span> 
      </div> 
     </form> 
    </div> 
</div> 

Controller:

function DemoCtrl($scope) { 

    var longName = 'Name too long'; 
    var nameRequired = 'Name is required!'; 
    $scope.class = ''; 
    $scope.showMsg = false; 
    $scope.validateEntry = function (validateItem) { 
     if (angular.isDefined(validateItem)) { 
      if (validateItem.length > 50) { 
       showErrorMsg(longName); 
      } else if (validateItem.length === 0) { 
       showErrorMsg(nameRequired); 
      } else { 
       $scope.class = ''; 
       $scope.showMsg = false; 
       $scope.accountForm.$dirty = false; 
       $scope.accountForm.$pristine = true; 
      } 
     } else { 
      showErrorMsg(nameRequired); 
     } 
    }; 

    $scope.submit = function(){ 
     alert('IS Form Dirty: '+$scope.accountForm.$dirty); 
    }; 

    function showErrorMsg(msg) { 
     $scope.class = 'error'; 
     $scope.showMsg = true; 
     $scope.msg = msg; 
     $scope.accountForm.$dirty = true; 
    } 
};