单击“提交”按钮后，如何触发所有验证？

Question

我已经为表单添加了验证，并且希望它在单击“提交”按钮时触发每个验证。 我尝试使用谷歌搜索技术来触发它们，但似乎它们对我没有用。

这是我的表格代码

<form id="CustomerForm" class="form-horizontal group-border stripped" name="CustomerDetails" novalidate ng-submit="CustomerDetails.$valid && AddCustomer()">
    <div class="form-group" ng-class="{'has-error': CustomerDetails.cname.$invalid && !CustomerDetails.cname.$pristine}">
        <label class="col-lg-2 col-md-3 control-label">Customer Name</label>
        <div class="col-lg-10 col-md-9">
            <input type="text" ng-model="CusDetails.cname" class="form-control" name="cname" id="cname" required />
            <p ng-show="CustomerDetails.cname.$error.required && !CustomerDetails.cname.$pristine" class="help-block">Customer name required!</p>
        </div>
    </div>
    <!--end of .form-group-->
    <div class="form-group" ng-class="{'has-error': CustomerDetails.comname.$invalid && !CustomerDetails.comname.$pristine}">
        <label class="col-lg-2 col-md-3 control-label">Company Name</label>
        <div class="col-lg-10 col-md-9">
            <input type="text" ng-model="CusDetails.comname" class="form-control" name="comname"id="comname" required />
            <p ng-show="CustomerDetails.comname.$error.required && !CustomerDetails.comname.$pristine" class="help-block">Comapany name required!</p>
        </div>
    </div>
    <!--end of .form-group-->
    <div class="form-group" ng-class="{'has-error': CustomerDetails.ctel.$invalid && !CustomerDetails.ctel.$pristine}">
        <label class="col-lg-2 col-md-3 control-label" for="">Telephone Number</label>
        <div class="col-lg-10 col-md-9">
            <div class="input-group input-icon">
                <span class="input-group-addon"><i class="fa fa-phone s16"></i></span>
                <input ng-model="CusDetails.tel" class="form-control" name="ctel" type="text" placeholder="(999) 999-9999" id="ctel" required >
                <p ng-show="CustomerDetails.ctel.$error.required && !CustomerDetails.ctel.$pristine" class="help-block">Telephone number required!</p>
            </div>
        </div>
    </div>
    <!-- End .form-group  -->
    <div class="form-group" ng-class="{'has-error': CustomerDetails.email.$invalid && !CustomerDetails.email.$pristine}">
        <label class="col-lg-2 col-md-3 control-label" for="">Email address</label>
        <div class="col-lg-10 col-md-9">
            <input ng-model="CusDetails.email" type="email" class="form-control" name="email" placeholder="someone@example.com" id="email" required >
            <p ng-show="CustomerDetails.email.$error.required && !CustomerDetails.email.$pristine" class="help-block">Email is required!</p>
            <p ng-show="CustomerDetails.email.$error.email && !CustomerDetails.email.$pristine" class="help-block">Please Enter valid email address.</p>                                 
        </div>
    </div>
    <!-- End .form-group  -->
    <div class="form-group">
        <div class="col-lg-9 col-sm-9 col-xs-12">
            <button name="btnSubmit" type="submit" class="btn btn-info pad"><span class="fa fa-user-plus"></span> Add Customer</button>
            <button type="button" id="cancel" class="btn btn-default pad">Cancel</button>
        </div>
    </div>
</form>

更新：我已根据Adrian Brand更改了代码，但仍未触发。 我究竟做错了什么？

这是我的表格的angularjs。 （控制器）

(function () {
    'use strict';

    angular
        .module('efutures.hr.controllers.customer', [])
        .controller('AddCustomerController', AddCustomerController);

    AddCustomerController.$inject = ['$scope', '$location', '$rootScope', '$http', 'CustService'];

    function AddCustomerController($scope, $location, $rootScope, $http, CustService) {

        (function initController() {


        })();



        $scope.AddCustomer = function () {

            var CustomerDetails = {
                cname: $scope.CusDetails.cname,
                comname: $scope.CusDetails.comname,
                tel: $scope.CusDetails.tel,
                email: $scope.CusDetails.email

            };

            if ($scope.CustomerDetails.$valid) {

                CustService.Customer(CustomerDetails, function (res) {
                    console.log(res);

                    $.extend($.gritter.options, {
                        position: 'bottom-right',
                    });

                    if (res.data == 'success') {
                        $.gritter.add({

                            title: 'Success!',
                            text: 'Successfully added the new customer ' + '<h4><span class="label label-primary">' + CustomerDetails.cname + '</span></h4>',
                            time: '',
                            close_icon: 'l-arrows-remove s16',
                            icon: 'glyphicon glyphicon-ok-circle',
                            class_name: 'success-notice'
                        });

                        $scope.CusDetails = {};
                        $scope.CustomerDetails.$setPristine();
                    }
                    else {
                        $.gritter.add({
                            title: 'Failed!',
                            text: 'Failed to add a new customer. Please retry.',
                            time: '',
                            close_icon: 'l-arrows-remove s16',
                            icon: 'glyphicon glyphicon-remove-circle',
                            class_name: 'error-notice'
                        });
                    }


                });
            }
        }
    }
})();

我什至尝试使提交的表单为true ，但仍然没有用。 对我唯一有效的方法是禁用按钮，直到按钮通过验证为止，但这不是必需的。 我希望它在单击提交表单时触发。 帮助将不胜感激。

Answer 1

在您要触发验证的click事件中，添加以下内容：

vm.triggerSubmit = function() {
    vm.homeForm.$setSubmitted();
    ...
}

这对我有用。 要了解有关此的更多信息，请单击此处： https : //code.angularjs.org/1.3.20/docs/api/ng/type/form.FormController

Answer 2

您的问题在于，您的提交按钮未包含在表单中，因此该表单永远不会提交。 您只是通过单击处理程序运行控制器方法。

表单验证与控制器无关，在控制器中没有位置。 这纯粹是一种观点关注。

在您的表单中，放置ng-submit =“ CustomerDetails。$ valid && AddCustomer（）”，将点击处理程序从“提交”按钮上移开，并将按钮行放置在表单中。 这样，仅当表单有效时，视图才会提交。 不要使用表单验证来污染您的控制器，并将其全部包含在视图中。 您应该以语法的形式查看控制器，然后甚至无法访问控制器中的$ scope。