Laravel and angularjs form validation - php

Question

I am new to angularjs and im playing around with it.
I'm stuck with one thing, in jQuery it's more easier to retrive the validation error messages json object from laravel, with angular i am able, but i am doing it this way and im sure there is a more effective way
My from
<div class="row">
<div class="col-lg-8">
<h5><?php echo Lang::get('auth.signup') ?></h5>
<div class="page-divider"></div>
<form name="myForm" ng-controller="formController" ng-submit="signupPost()" class="form-horizontal" novalidate>
<div class="form-group">
<label for="first_name" class="col-lg-3 control-label"><?php echo Lang::get('form.first_name') ?></label>
<div class="col-lg-8">
<input type="text" name="first_name" ng-model="formData.first_name" id="first_name" class="form-control input-small">
<span class="help-block" ng-show="errors['first_name'][0]">{{ errors['first_name'][0] }}</span>
</div>
</div>
<div class="form-group">
<label for="last_name" class="col-lg-3 control-label"><?php echo Lang::get('form.last_name') ?></label>
<div class="col-lg-8">
<input type="text" name="last_name" ng-model="formData.last_name" id="last_name" class="form-control input-small">
<span class="help-block" ng-show="errors['last_name'][0]">{{ errors['last_name'][0] }}</span>
</div>
</div>
<div class="form-group">
<label for="username" class="col-lg-3 control-label"><?php echo Lang::get('form.username') ?></label>
<div class="col-lg-8">
<input type="text" name="username" ng-model="formData.username" id="username" class="form-control input-small">
<span class="help-block" ng-show="errors['username'][0]">{{ errors['username'][0] }}</span>
</div>
</div>
<input type="submit" value="<?php echo Lang::get('auth.signup') ?>" class="btn btn-primary">
</form>
</div>
</div>
Angular controller
function formController($scope, $http)
{
$scope.formData = {};
$scope.signupPost = function() {
$http.post('signup', $scope.formData).success(function(data){
if(data.msg == "success")
{
$location.path(data.redirect)
}
else
{
$scope.errors = data.error_msg;
}
});
}
}
And the json what laravel retunrs if the form validation fails
$messages = $val->messages();
$data = array(
'error_msg' => array(
'first_name' => $messages->get('first_name'),
'last_name' => $messages->get('last_name'),
'username' => $messages->get('username'),
'profession' => $messages->get('profession'),
'location' => $messages->get('location'),
'email' => $messages->get('email'),
'gender' => $messages->get('gender'),
'password' => $messages->get('password'),
'dob' => $messages->get('dob'),
'confirm_password' => $messages->get('confirm_password'),
));
}
return Response::json($data);
I tried a few variations and currently it works like this in the form, show the form validation error messages if its set, this way errors['first_name'][0] for all fields.
My question is, is there a more effective way doing this? If someone could show me an example would be great
Thank you

Answer 1

Well you can do something like this
<div class="col-lg-8">
<input type="text" name="first_name" ng-model="formData.first_name" id="first_name" class="form-control input-small">
<span class="help-block" ng-show="errors.first_name[0]">{{ errors.first_name.toString()}}</span>
</div>
The toString() function would concatenate the string array using , as separator. If you want customization of the content your option are to
Write a javascript function, that takes and returns some formatted data.
More angular way would be to do a ng-repeat on the errors.
<span ng-repeat='error in errors.first_name'>
{{error}}
</span>

Answer 2

I know the question is old but I want to share my awesome new angular directive, I made a project on Github and I think that it just rocks compare to whatever is/was available...I based myself on the excellent Laravel PHP Framework and made it available under Angular... Since I use very similar approach compare to Laravel but using an AngularJS Directive (my own directive), you will find my implementation very easy to follow.
<!-- example 1 -->
<label for="input1">Simle Integer</label>
<input type="text" validation="integer|required" ng-model="form1.input1" name="input1" />
<span class="validation text-danger"></span>
<!-- example 2 -->
<label for="input2">Alphanumeric + Exact(3) + required</label>
<input type="text" validation="alpha|exact_len:3|required" ng-model="form1.input2" name="input2" />
<span class="validation text-danger"></span>
So I can define whatever amount of validation rules which I want in a simple directive validation="min_len:2|max_len:10|required|integer" and the error message will always display in the next <span> Don't you guys like it already? 1 line of code for your input, 1 line of code for the error display, you can't be simpler than that...oh and I even support your custom Regex if you want to add :)
No more clustered Form with 10 lines of code for 1 input when the only thing you need is 2 lines, no more, even for an input with 5 validators on it. And don't worry about the form not becoming invalid, I took care of that as well, it's all handled the good way.
Take a look at my Github project Angular-Validation and spread the word =)
EDIT
To make an even more smoother user experience, I added validation on timer. The concept is simple, don't bother the user while he's busy typing but do validate if he makes a pause or change input (onBlur)... Love it!!!
You can even customize the timer as per your liking, I've decided to default it to 1 second within the directive but if you want to customize you can call as for example typing-limit="5000" to make a 5 sec. timeout. Full example:
<input type="text" validation="integer|required" typing-limit="5000" ng-model="form1.input1" name="input1" />
<span class="validation text-danger"></span>
DEMO
Added a live demo on Plunker