angular表单验证在表单提交时不起作用

Question

我是新来angularJS的。我的表单不会在提交时生效。我使用从bower下载的angular-validation模块。如何在提交按钮上验证表单？

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

您还需要在控制器中验证表单。此外，如果将表单(user)作为参数传递，效果会更好。如果您正在编写单元测试(您应该这样做)，那么在这种情况下更容易测试您的方法，因为它不会与$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>