单击提交按钮时如何触发所有验证？

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'
                        });
                    }


                });
            }
        }
    }
})();

我什至尝试过制作submitted true 的表格，但还是不行。 唯一对我有用的是在验证之前禁用按钮，但这不是要求。我希望它在单击提交表单时触发。非常感谢您的帮助。

Answer 1

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

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。