以角度提交驗證表格

Question

你好，我正在嘗試使我的驗證顯示在表單提交但驗證不起作用，無論如何發送表單。這是我的表格：

<form class="form-horizontal col-md-10" role="form" name="authenticationForm" ng-controller="AuthenticationController as authentication" ng-submit="authenticate(authenticationForm.$valid)" novalidate> 
     <hr> 
     <br> 
     <div class="form-group" ng-class="{ 'has-error' : authenticationForm.email.$invalid && !authenticationForm.email.$pristine && submitted }"> 
      <div class="col-md-4"> 
       <label for="email">Email: </label> 
      </div> 

      <div class="col-md-6"> 
       <input type="email" id="email" name="email" ng-model="email" class="form-control" ng-required/> 
       <p ng-show="authenticationForm.email.$invalid && !authenticationForm.email.$pristine && submitted" class="help-block"> 
        Your email address is required. 
       </p> 
      </div> 
     </div> 

     <div class="form-group" ng-class="{ 'has-error' : authenticationForm.password.$invalid && !authenticationForm.password.$pristine && submitted }"> 
      <div class="col-md-4"> 
       <label for="password">Password</label> 
      </div> 

      <div class="col-md-6"> 
       <input type="password" id="password" name="password" ng-model="password" class="form-control" ng-required/> 
       <p ng-show="authenticationForm.password.$invalid && !authenticationForm.password.$pristine && submitted" class="help-block"> 
        Password is required. 
       </p> 
      </div> 
     </div> 

     <div class="form-group"> 
      <div class="col-md-6 col-md-offset-4"> 
       <div class="checkbox"> 
        <label> 
         <input type="checkbox" name="remember"> Remember Me 
        </label> 
       </div> 
      </div> 
     </div> 

     <span class="help-block errorMessages" ng-show="user.input.errors !== undefined"> 
      <div class="alert alert-danger"> 
       <ul class="list"> 
        <li ng-repeat="error in user.input.errors"> 

         <i class="fa fa-times"></i>&nbsp;<% error %> 

        </li> 
       </ul> 
      </div> 
     </span> 

     <div class="form-group"> 
      <div class="col-md-12"> 
       <br/> 
       <hr> 
       <button class="big-red-button" type="submit">Login <i class="glyphicon glyphicon-chevron-right"></i></button> 

       <a class="btn btn-link" href="{{ url('/password/email') }}">Forgot Your Password?</a> 
      </div> 
     </div> 

    </form> 

這是我的控制器功能：

$scope.authenticate = function(isValid) { 
      // settting submitted to true 
      $scope.submitted = true; 

      // check to make sure the form is completely valid 
      if (isValid) { 

       var req = { 
        method: 'POST', 
        url: '/auth/login', 
        headers: { 
         'X-XSRF-Token': $("meta[name='csrf_token']").attr("content") 
        }, 
        data: { 
         email: $scope.email, 
         password: $scope.password 
        } 
       } 

       $http(req) 
        .success(function (data, status, headers, config) { 
         if (data.url !== undefined) 
         { 
          window.location.href = data.url; 
         } 
        }) 
        .error(function (data, status, headers, config) { 
         // called asynchronously if an error occurs 
         // or server returns response with an error status. 
         //alert(data); 
        }); 

      } 

     }; 

可有人請指出我在做什麼錯在這裏？謝謝。 :)

Answer 1

您應該能夠檢查$scope.authenticationForm.$valid並阻止xhr，並且您還可以在視覺上將提交按鈕設置爲ng-disabled="authenticationForm.$invalid"，以便他們無法單擊該按鈕，直到其有效。該禁用設置不會阻止以其他方式提交表單（輸入密鑰等）。

你是否檢查過布爾值來找你？它應該是false是否存在驗證錯誤。

Answer 2

當您使用controllerAs語法，那麼你應該使用每個ng-model爲

authentication.email & authentication.password

電子郵件字段

<input type="email" id="email" name="email" ng-model="authentication.email" 
class="form-control" ng-required/> 

密碼字段

<input type="password" id="password" name="password" ng-model="authentication.password" 
class="form-control" ng-required/> 

然後內部控制器，你可以通過this.email & this.password

Answer 3

這對我來說太得到這個值。將ng-required改爲required，確保isValid boolean實際上是false，如果它不是有效的形式並且取出form元素中的novalidate。

有時角度$有效不總是準確的。另外，我認爲你應該把ng-required =「true」或某些函數返回true，如果你正在使用ng-required。

看看這篇文章：http://arnaldocapo.com/blog/post/detect-if-html-5-validation-ui-is-present/53

Answer 4

只需更換每一個地方ng-required到required，如：

<input type="text" required/> 

，還可以設置ng-controller="AuthenticationController "代替

ng-controller="AuthenticationController as authentication"