I am currently working on a contact form for my website using angular js front end and using Laravel as a backend api. This is an example of what I have as a field.
<div class="row">
<div class="form-group col-xs-12 floating-label-form-group">
<label for="title">Your Name*</label>
<input class="form-control" ng-model="contact_name" type="text" name="contact_name" placeholder="Your Name*">
<span ng-if="errors.contact_name[0]" class="alert-danger">@{{ errors.contact_name.toString()}}</span>
</div>
</div>
This makes a call through my controller.
$scope.processForm = function ()
{
$scope.submissionSuccess = false;
$scope.errors = null;
$http({
method:'POST',
url:'/api/post-form',
data:{
_token: $scope._token,
contact_name:$scope.contact_name,
contact_email:$scope.contact_email,
phone:$scope.phone,
message:$scope.message
}
}).success(function(data, status, headers, config){
/*CLEAR FORM FIELDS*/
$scope.submissionSuccess = true;
$scope.contact_name = '';
$scope.contact_email = '';
$scope.phone = '';
$scope.message = '';
// SHOW SUCCESS FOR 2 SECONDS.
$timeout(function () {
$scope.submissionSuccess = false;
}, 2000);
}).error(function(error){
$scope.errors = error.data;
});
}
This is then passed to my laravel controller. And when I log the data into the console I get.
Object errors : Object contact_email : Array[1] 0 : "The contact email field is required." length : 1 proto : Array[0] contact_name : Array[1] 0 : "The contact name field is required." length : 1 proto : Array[0] message : Array[1] 0 : "The message field is required."
How would I display the error messages?
Maybe you can try like this.
<span class="has-error" ng-repeat="error in errors.contact_name">{{ error }}</span>
Hope this help.