2

私はangularjsが初めてで、それをいじっています。

私は1つのことにこだわっています.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>

角度コントローラー

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]ですべてのフィールドに適用されます。

私の質問は、これを行うより効果的な方法はありますか? 誰かが私に例を示すことができれば素晴らしいでしょう

ありがとうございました

4

2 に答える 2

3

さて、あなたはこのようなことをすることができます

<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 関数を作成します。

  • より角度のある方法はng-repeat、エラーに対して実行することです。

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

于 2013-08-23T07:24:29.643 に答える