Wie asynchron Formular in Angular nach dem Senden validieren?

Question

Ich habe ein Registrierungsformular, das Client-Seite validiert, die gut funktioniert. Meine App hat auch eine serverseitige Validierung, die dem Client einen JSON mit Fehlern für jedes Feld zurückgibt.

Ich versuche, sie so zu handhaben:

// errors = { 
// "username": [ 
//  "Account 'test2@test.com' already exist!" 
// ] 
// }; 

for(var field in errors) { 
    $scope.RegForm.$setValidity(field, false); 
    $scope.RegForm[field].$error.server = errors[field].join('\n'); 
} 

Das Problem ist, dass Fehler sichtbar bleiben, auch wenn ich Feld ändern. Ich muss die Gültigkeit zurück auf wahr setzen und Serverfehler in einem Moment entfernen. Nur nicht sicher wie und wann.

Wie behandelt man Serverdaten richtig, um sie zu ändern? $ asyncValidators wird nicht funktionieren, weil ich im Falle von Benutzername nicht erlaubt bin, Benutzer zu registrieren, nur um zu sehen, ob dieser Benutzername frei ist.

Answer 1

auf den in AngularJS - Server side validation and client side forms vorgeschlagenen Antworten Basierend schaffen wir eine Richtlinie, die die Validierung nach der Änderung der Eigenschaften des Modells wird zurückgesetzt.

Live Beispiel auf jsfiddle.

angular.module('ExampleApp', ['ngMessages']) 
 
    .controller('ExampleController', function($scope, ServerService) { 
 
    $scope.user = {}; 
 

 
    $scope.doSubmit = function(myForm) { 
 
     ServerService.save().then(function(errors) { 
 
     // Set error from server on our form 
 
     angular.forEach(errors, function(error) { 
 
      myForm[error.fieldName].$setValidity(error.error, false); 
 
     }); 
 
     }); 
 
    }; 
 
    }) 
 
    //Simulate Ajax call 
 
    .service('ServerService', function($q, $timeout) { 
 
    var errorsFromServer = [{ 
 
     fieldName: "firstName", 
 
     error: "serverError" 
 
    }, { 
 
     fieldName: "lastName", 
 
     error: "serverError" 
 
    }, { 
 
     fieldName: "email", 
 
     error: "serverError" 
 
    }, { 
 
     fieldName: "email", 
 
     error: "serverError2" 
 
    }]; 
 
    return { 
 
     save: function() { 
 
     return $q.when(errorsFromServer); 
 
     } 
 
    }; 
 
    }) 
 
    .directive('serverValidation', function() { 
 
    return { 
 
     restrict: "A", 
 
     require: "ngModel", 
 
     scope: { 
 
     ngModel: "=", 
 
     serverValidation: "=" // String or array of strings with name of errors 
 
     }, 
 
     link: function(scope, elem, attr, ngModelCtrl) { 
 
     function setValidity(errorName) { 
 
      console.log(errorName); 
 
      ngModelCtrl.$setValidity(errorName, true); 
 
     } 
 
     if (typeof(scope.serverValidation) == "string") { 
 
      console.log(scope.serverValidation); 
 
      scope.arrServerValidation = [scope.serverValidation]; 
 
     } else { 
 
      scope.arrServerValidation = scope.serverValidation; 
 
     } 
 
     var firstError = scope.arrServerValidation[0]; 
 
     scope.$watch('ngModel', function() { 
 
      // workaround to don't update $setValidity, then changed value of ngModel 
 
      // update $setValidity, only when server-error is true 
 
      if (firstError && ngModelCtrl.$error[firstError]) 
 
      angular.forEach(scope.arrServerValidation, setValidity); 
 
     }); 
 
     }, 
 
    }; 
 
    });

.error { 
 
    color: red; 
 
    font-style: italic; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> 
 

 
<div ng-app="ExampleApp"> 
 
    <div ng-controller="ExampleController"> 
 
    <ng-form name="myForm"> 
 
     <input ng-model="user.firstName" name="firstName" required server-validation="'serverError'"> 
 
     <div ng-messages="myForm.firstName.$error" class="error"> 
 
     <div ng-message="required">firstName is required</div> 
 
     <div ng-message="serverError">firstName is server error</div> 
 
     </div> 
 
     <input ng-model="user.lastName" name="lastName" required server-validation="'serverError'"> 
 
     <div ng-messages="myForm.lastName.$error" class="error"> 
 
     <div ng-message="required">lastName is required</div> 
 
     <div ng-message="serverError">lastName is server error</div> 
 
     </div> 
 
     <input ng-model="user.email" name="email" required server-validation="['serverError','serverError2']"> 
 
     <div ng-messages="myForm.email.$error" class="error" multiple="true"> 
 
     <div ng-message="required">email is required</div> 
 
     <div ng-message="serverError">email is server error</div> 
 
     <div ng-message="serverError2">email is server error 2</div> 
 
     </div> 
 
     <input ng-disabled="myForm.$invalid" ng-click="doSubmit(myForm)" type="submit"> 
 
    </ng-form> 
 
    </div> 
 
</div>

Answer 2

Versuchen Sie, wie diese

for (var field in errors) { 
    $timeout(function(){ 
     $scope.RegForm.$setValidity(field, false); 
     $scope.RegForm[field].$error.server = errors[field].join('\n'); 
    }); 
}