2016-02-18 3 views
1

Когда я нажимаю кнопку «Отправить», форма отправляется вместо проверки для необходимых полей.подача угловой формы, не проверяющая подтверждение формы

Markup

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

Кратчайший путь для вызова функции, если форма Validate диктуется ниже, который будет разжег действительным 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">

Смежные вопросы