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 更改了代码，但仍未触发。我做错了什么？

这是表格的角色。（控制器）

(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 =＆＃34; CustomerDetails。$ valid＆amp;＆amp; AddCustomer（）＆＃34;并从提交按钮中取出单击处理程序，并将按钮行放在表单中。这样，只有表单有效时才会提交视图。不要使用表单验证污染您的控制器，并将其全部保存在视图中。您应该将控制器视为语法，然后您甚至无法访问控制器中的$ scope。

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

2 个答案: