php - Laravel 和 angularjs 表单验证

Question

我是 angularjs 新手，正在尝试使用它。

我坚持一件事，在 jQuery 中，从 laravel 检索验证错误消息 json 对象更容易，我可以用 Angular ，但我这样做，我确信有一种更有效的方法

我的来源

<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;
            }
        });
    }
}

如果表单验证失败，laravel 将返回 json

 $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);

我尝试了一些变体，目前它在表单中的工作方式如下，如果设置了表单验证错误消息，则显示表单验证错误消息，这样所有字段的 errors['first_name'][0] 。

我的问题是，有没有更有效的方法？如果有人能给我举个例子那就太好了

谢谢

Answer 1

你可以做这样的事情

<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>

toString() 函数将使用 , 作为分隔符连接字符串数组。如果您想要自定义内容，您的选择是

• 编写一个 JavaScript 函数，用于获取并返回一些格式化数据。

• 更 Angular 方法是对错误执行 ng-repeat。

  <span ng-repeat='error in errors.first_name'>
    {{error}}
  </span>