Comment rendre les erreurs de client? AngularJS/WebApi ModelState

Je suis en train de construire un AngularJS un SPA avec WebApi pour le backend. Je suis à l'aide d'attributs pour la validation du modèle sur le serveur, si la validation échoue, c'est ce que j'retour de la ModelState.

     {"Message":"The request is invalid.","ModelState":{"model.LastName":["Last Name must be at least 2 characters long."]}}

Comment puis-je rendre au client avec AngularJS?

      //Save User Info
$scope.processDriverForm = function(isValid) {
if (isValid) {
//set button disabled, icon, text
$scope.locked = true;
$scope.icon = 'fa fa-spinner fa-spin';
$scope.buttonText = 'Saving...';
$scope.submitted = true;
$scope.formData.birthDate = $scope.formData.birthMonth + '/' + $scope.formData.birthDay + '/' + $scope.formData.birthYear;
$http({
method: 'POST',
url: 'api/Account/Register',
data: $.param($scope.formData),
headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //set the headers so angular passing info as form data (not request payload)
})
.success(function (data) {
console.log(data);
toastr.success('User ' + $scope.formData.username + ' created!');
$scope.userForm.$setPristine();
$scope.formData = {};
//reset the button
$scope.locked = false;
$scope.icon = '';
$scope.buttonText = 'Save';
//reset validation submitted
$scope.submitted = false;
})
.error(function (data, response) {
console.log(data);
toastr.error('Ooops! There was an error creating the user. Try again and if the problem persists, contact Support.');
//reset the button
$scope.locked = false;
$scope.icon = '';
$scope.buttonText = 'Save';
$scope.submitted = false;
var resp = {};
var errors = [];
for (var key in resp.ModelState) {
for (var i = 0; i < resp.ModelState[key].length; i++) {
errors.push(resp.ModelState[key][i]);
}
}
$scope.errors = errors;
});
}
else {
toastr.warning('Invalid User Form, correct errors and try again.');
}
};
qu'avez-vous essayé ? Vous pouvez gérer cela par des dizaines de méthodes.. Cette question est que la façon de large. Vous choisissez d'abord le comportement de votre application pour dispaying (alerte ? popup ? collant de notification ?) ...
Désolé, je n'ai pas l'intention de la manière de rendu. Je n'étais tout simplement pas comment les erreurs de la ModelState tableau qui est passé avec les 400 BadRequest erreur

OriginalL'auteur Brad Martin | 2014-04-15

  1. 17

    Lors de votre appel à votre serveur, la capture de l'erreur en fonction du rejet de la $http promesse.

    Puis dans votre contrôleur, je voudrais suggérer l'aplatissement de la réponse à un tableau d'erreurs lors de la manipulation de l'erreur pour l'affichage comme indiqué dans ce violon exemple:

    for (var key in resp.ModelState) {
for (var i = 0; i < resp.ModelState[key].length; i++) {
errors.push(resp.ModelState[key][i]);
}
}

    De mettre tout cela ensemble:

    //Post the data to the web api/service
$http.post(url, data)
.success(successHandler)
.error(function (response) {
//when there's an error, parse the error
//and set it to the scope (for binding)
$scope.errors = parseErrors(response);
});
//separate method for parsing errors into a single flat array
function parseErrors(response) {
var errors = [];
for (var key in response.ModelState) {
for (var i = 0; i < response.ModelState[key].length; i++) {
errors.push(response.ModelState[key][i]);
}
}
return errors;
}
    J'ai ajouté l' $requête http dans mon code, mais comment puis-je obtenir ces erreurs de la BadRequest qui est retourné et mis dans le "reee" variable. Je suis encore dans les premiers stades de l'apprentissage de JS, seulement 2 mois et c'est ma première exposition à la JS et AngularJS. Est ce que l' .push est pour?
    J'ai mis à jour le code dans ma réponse à montrer une solution plus complète.
    Bon aller, et je comprends maintenant le processus. De grandes choses.
    réponse.ModelState sera la réponse.modelState chameau de droit? l'api web va sérialiser il en camelcase je crois.

    OriginalL'auteur Brocco

  2. 3

    La façon la plus simple pourrait être de saisir toutes les erreurs de ModelState et de les mettre dans une nouvelle propriété sur le $scope.

    $http.post(url, data).
success(successHandler).
error(function (response) {
$scope.errors = getErrors(response);
});
function getErrors(responseWithModelState) {
var errors = [];
/*
Get error messages out of ModelState property, and push them into the errors variable...
Brocco beat me to it. :-)
*/
return errors;
};

    Puis dans votre code HTML...

    <ul>
<li ng-repeat="e in errors">{{e}}</li>
</ul>

    Ou, au lieu de le faire à chaque gestionnaire d'erreur, vous pouvez l'écrire une fois et s'en prévaloir pour chaque requête HTTP à l'aide d'un intercepteur. Je n'ai jamais écrit un moi-même, donc je vais simplement vous indiquer à la doc (défiler vers le bas pour les Intercepteurs de la section).

    J'ai ajouté ma $requête http, mais je ne suis pas sûr de la façon de remplir cette. @Brocco le violon est très bien sauf que je ne suis pas sûr comment le mettre en œuvre. Toute aide avec le code que j'ai ajouté?
    Il ressemble à @Brocco de la mise à jour devrait vous aider. Je n'ai rien à ajouter qu'il n'a pas dit. Bonne chance! 🙂

    OriginalL'auteur Andrew