如何在angularjs中验证后提交表单？

Question

var app = angular.module('formExample', []);
app.controller('FormCtrl', function ($scope, $http) {
    $scope.data = {};
        $scope.submitForm = function() {
            formData = $scope.regform;
                console.log("posting data....");
                $http({ url: '/',data: $scope.regform, method: 'post' }).success();
                console.log(formData);
        };
         $scope.reset = function(form) {
            if (form) {
                    form.$setPristine();
                        form.$setUntouched();
                }
                $scope.user = angular.copy($scope.data);
        };
                $scope.reset();
});

这是我的 JavaScript 代码。它与验证一起提交表单。我只需要在验证完成后提交表格。并且重置按钮无法正常工作。

点击hereplnkr示例

Answer 1

你可以为此目的创建一个指令

答案下面的代码是从here复制而来的，（复制粘贴为仅链接答案是不允许的）...

 var app = angular.module('plunker', []);

 var ValidSubmit = ['$parse', function ($parse) {
        return {
            compile: function compile(tElement, tAttrs, transclude) {
                return {
                    post: function postLink(scope, element, iAttrs, controller) {
                        var form = element.controller('form');
                        form.$submitted = false;
                        var fn = $parse(iAttrs.validSubmit);
                        element.on('submit', function(event) {
                            scope.$apply(function() {
                                element.addClass('ng-submitted');
                                form.$submitted = true;
                                if(form.$valid) {
                                    fn(scope, {$event:event});
                                }
                            });
                        });
                    }
                }
            }
        }
    }]
    app.directive('validSubmit', ValidSubmit);

然后在html中

<form class="form-horizontal" role="form" name="form" novalidate valid-submit="connect()">
  <div class="form-group">
    <div class="input-group col col-sm-11 col-sm-offset-1">
      <span class="input-group-addon input-large"><i class="glyphicon glyphicon-envelope"></i></span>
      <input class="input-large form-control" type="email" id="email" placeholder="Email" name="email" ng-model="email" required="required">
    </div>
    <p class="col-sm-offset-3 help-block error" ng-show="form.$submitted && form.email.$error.required">please enter your email</p>
    <p class="col-sm-offset-3 help-block error" ng-show="form.$submitted && form.email.$error.email">please enter a valid email</p>
  </div>
</form>

PLUNKER LINK 来检查这个