Laravel和angularjs表單驗證

Question

我是angularjs和im玩家的新手。

我在jQuery中遇到了一件事情，它更容易從laravel中檢索驗證錯誤消息json對象，並且角度我能夠，但我這樣做，並且我確定存在更有效的方法

我從

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

並且json如果什麼laravel retunrs形式驗證失敗

$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函數，需要並返回一些格式化的數據。

• 更有角度的方法是對錯誤做一個ng-repeat。

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

Answer 2

我知道這個問題是舊的，但我想分享我真棒新的角度指令，我做了Github上的一個項目，我認爲它只是岩石比較無論是/是可用...我基於優秀的Laravel PHP框架，並在Angular下提供...因爲我使用與Laravel相似的方法，但使用AngularJS指令（我自己的指令），您會發現我的實現非常容易跟隨。

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

所以我可以定義的，我想在一個簡單的指令validation="min_len:2|max_len:10|required|integer"和錯誤信息將始終顯示在未來<span>你們不喜歡，它已經驗證規則，無論數量多少？ 1行代碼爲您的輸入，1行代碼的錯誤顯示，你不能比這更簡單...哦，我甚至支持你的自定義正則表達式，如果你想添加:)

沒有更多的聚集形式10行代碼用於1個輸入，當你需要的只有2行時，不會再有，即使對於有5個驗證器的輸入也是如此。不要擔心表單不會失效，我也會照顧到這一點，這一切都是以良好的方式處理的。

看看我Github上項目Angular-Validation和傳播詞=）

編輯
爲了讓更加流暢的用戶體驗，我加在計時器驗證。這個概念很簡單，在用戶忙着打字的時候不要打擾用戶，但是如果他暫停或者改變輸入（onBlur）的話，就會驗證他的...喜歡！
你甚至可以根據自己的喜好自定義計時器，我已經決定在指令中默認它爲1秒，但是如果你想自定義，你可以調用例如typing-limit="5000"作5秒。時間到。完整的示例：

<input type="text" validation="integer|required" typing-limit="5000" ng-model="form1.input1" name="input1" /> 
<span class="validation text-danger"></span> 

DEMO
添加於Plunker