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代码。它提交表格以及验证。我只需要在验证完成后提交表单。并且重置按钮无法正常工作。

点击here plnkr示例

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来检查

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

1 个答案: