2016-02-18 60 views
1

当我点击提交按钮时,表单被提交而不是验证所需的字段。角度表单提交没有检查表单验证

标记

<!DOCTYPE html> 
<html lang="en" ng-app="myApp" ng-controller="myCtrl"> 

<head> 
    <meta charset="UTF-8"> 
    <title>HTML 5</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> 
</head> 
<body> 
    <div id="container"> 
     <p ng-show="msg"> {{ msg }}</p> 
     <form name="myForm" novalidate ng-submit="valid()"> 
      <p> Name <input type="text" name="name" id="" ng-model="user.name" ng-required=true></p> 
      <p ng-show="myForm.name.$invalid && myForm.name.$touched">name is required</p> 
      <p> Email <input type="email" name="email" id="" ng-model="user.email" ng-required=true> </p> 
      <p ng-show="myForm.email.$invalid && myForm.email.$touched">must be a valid email</p> 

      <input type="submit" value="submit"> 
     </form> 
    </div> 
    <script> 
     angular.module('myApp', []) 
     .controller('myCtrl', ['$scope', function($scope) { 
      $scope.valid = function() { 
      $scope.msg = "form submitted"; 
     } 
     }]); 
    </script> 
</body> 
</html> 

任何帮助将不胜感激。由于

回答

1

最短的方式来调用函数,如果形式是验证如下决定,这将解雇了有效function只有当形式是有效的。

ng-submit="myForm.$valid && valid()" 

或者其他方法是检查myForm对象$scope,因为当你给name="myForm"的形式,角度确实里面创建范围对象,都该对象内的信息字段的信息。

$scope.valid = function(){ 
    if($scope.myForm.$valid){ 
     //form is valid 
     //do $http.post call if you wanted to submit form data 
    } 
    else { 
     alert('form is invalid');//some how notify user that form is invalid. 
    } 
} 
0

尝试把:

$scope.valid=function(){ 
     if($scope.myForm.isValid())$scope.msg="form submitted"; 
else $scope.msg="form with errors"; 
    } 

希望它有助于

0

你可以只使用禁用的提交按钮:

ng-disabled="boolean expression"

你的情况

这将是简单的:

<input type="submit" value="submit" ng-disabled="!myForm.$valid">