Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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

share|improve this question
    
Seems to be fine. When you say it was easier in jquery, can you provide example. Since the error for each field itself is an array we need to use the syntax. –  Chandermani Aug 23 '13 at 6:57
    
Take a look at this: docs.angularjs.org/guide/forms It explains how you can make use of Angular client side validation. –  Martijn Aug 23 '13 at 6:59
    
@Chandermani what i meant with jQuery is it i looped through with an each function in the error messages and broke it to key value and simplie appended the error messages to the actual id, this is why i asked about angular :) –  Web Student Aug 23 '13 at 7:01
add comment

1 Answer

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>
    

share|improve this answer
    
thank you for your reply, i think i will stick to what i have right now, i think using an ng-repeat under all inputs dont really calp, thank you for your reply sir –  Web Student Aug 23 '13 at 7:29
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.