Подтверждение угловой формы не работает при отправке формы

Question

Я новичок в angularJS. Моя форма не подтверждается при отправке. Я использую модуль угловой проверки, загруженный с беседки. Как я могу подтвердить форму на кнопке отправки?

Я использую refrence из https://github.com/huei90/angular-validation/blob/master/API.md
Моей формы таково:

<div ng-controller="nameController"> 
     <form name="myForm" ng-submit="submitForm()"> 
        <label for="ud_fname"></label> 
        <input 
         type="text" 
         id="ud_fname" 
         name="ud_fname" 
         placeholder="First Name" 
         ng-model="form.ud_fname" 
         valid-method="blur" 
         validator="required" 
         required-error-message="Required" 
        > 

        <label for="ud_lname"></label> 
        <input 
         type="text" 
         id="ud_lname" 
         name="ud_lname" 
         placeholder="Last Name" 
         ng-model="form.ud_lname" 
         valid-method="blur" 
         validator="required" 
         required-error-message="Required" 
        > 

        <input type="submit" value="Add" class="pure-button" /> 
        <input type="reset" value="Reset" class="pure-button" /> 

    </form> 

Моей Controler такова:

app.controller('nameController', function ($scope, $http) { 

    // insert record 
    $scope.submitForm = function(){ 
     var url= 'functions/insert.php'; 
     var data = { 
      ud_fname: $scope.form.ud_fname, 
      ud_lname : $scope.form.ud_lname, 
     }; 
     console.log(data); 
     $http({ 
      url: url, 
      data: data, 
      method: 'post' 
     }).success(function (response){ 
      console.log(response); 
     }); 
    }; 

}); 

Answer 1

Вы должны проверить на ng-submit & не называть submitForm если его недействительным form

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

Answer 2

Необходимо также проверить форму в своем контроллере. Кроме того, было бы лучше, если вы передадите форму (пользователь) в качестве параметра. Если вы пишете модульные тесты (что вам нужно), было бы легче проверить ваш метод в этом случае, так как не будет связи с $ scope.

P.S. Перенесите свой код на контроллер. В качестве синтаксиса вы не пожалеете.

$scope.submitForm = function (user, isValid){ 
    if (isValid) { 
    var url= 'functions/insert.php'; 
    var data = { 
     ud_fname: user.ud_fname, 
     ud_lname : user.ud_lname, 
    }; 
    console.log(data); 
    $http({ 
     url: url, 
     data: data, 
     method: 'post' 
    }).success(function (response){ 
     console.log(response); 
    }); 
} 
}; 

И ваша форма будет: -

<form name="myForm" ng-submit="submitForm(form, myForm.$valid)"> 
..... 
</form>