角度表单验证不适用于表单提交

Question

我是 angularJS 的新手。我的表单在提交时未验证。我使用从 bower 下载的角度验证模块。如何验证提交按钮上的表单？

我使用来自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>

我的控制器是这样的：

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 耦合。

附：把你的代码迁移到controllerAs语法，你不会后悔的。

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