AngularJS: server side validation of multiple forms
<form name="bigForm" ng-submit="submit()">
<div class="form" ng-repeat="cake in cakes">
<ng-form name="innerForm">
<input type="text" name="cakeName" ng-model="cake.name">
<input type="number" name="cakePrice" ng-model="cake.price">
</ng-form>
</div>
<button type="submit">Submit</button>
</form>
In sumbit, I submit:
{
[
{ name: "CakeA", price: 111},
{ name: "CakeB", price: 222}
]
}
Server response:
{
[
{ isCakeOk: true },
{ isCakeOk: false, errors: [{ name: "That a bad name for a cake" }] }
]
}
Now I want to set the "serverValidation" $ error to the correct input in the correct form. How can I do it? In one form, I would use bigForm.cakeName. $ SetValidity ('serverValidation', false), but what if I have a lot of (ng-) forms created by ng-repeat?
+4
1 answer
If you want to display an error message based on server response, you can do this
Assign a server response
$scope.cakes = [
{ isCakeOk: true },
{ isCakeOk: false, errors: [{ name: "That a bad name for a cake" }] }
];
after submitting the action.
Similarly, you can assign an error class for input / label to inform the user about the error.
ng-repeat, bigForm.innerForm.cakeName
<script>
var formApp = angular.module('formApp',[]);
formApp.controller("FormController",function($scope){
$scope.cakes = [{ name: "CakeA", price: 111},{ name: "CakeB", price: 222}];
});
</script>
<body ng-controller="FormController">
<div class="form-container">
<form name="bigForm" ng-submit="submit()">
<div class="form" ng-repeat="cake in cakes">
<ng-form name="innerForm">
<input type="text" name="cakeName" ng-model="cake.name" ng-required="true">
<span class="error">{{cake.errors[0].name}}</span>
<input type="number" name="cakePrice" ng-model="cake.price">
</ng-form>
</div>
<button type="submit">Submit</button>
</form>
</div>
</body>
0