Question

我有一个表单，我想在用户点击提交时触发验证。如果验证失败，则显示适当的错误消息。这很有效。

但是，如果验证通过，我希望表单提交一个具有完整页面重新加载的同步POST请求，就像操作和方法参数设置为正常一样。

如何从AngularJS范围的ng-submit函数触发正常的后期操作（不是AJAX）？

我的形式当然看起来基本如下：

<form id="myForm" name="myForm" ng-submit="formAction(this, models)">
  ...
 <input type="submit" value="Submit">
</form>

我能想到的最好的方法是用另一个隐藏的形式来反映表单的内容，提交那个，但必须有更好的方法！

TO CLARIFY：如果验证通过，我需要表单提交，基本上表现得像普通的同步帖子表单提交，它将用户放在服务器从post请求返回的页面上。

Answer 1

http://plnkr.co/edit/cgWaiQH8pjAT2IRObNJy?p=preview

请检查此plunkr

基本上我正在做的是传递$ event对象。 form是事件对象的目标，我们可以提交它。

function Ctrl($scope) {
    $scope.list = [];
    $scope.text = 'hello';
    $scope.submit = function($event) {
      if ($scope.text) {
        $scope.list.push(this.text);
        if(this.text === 'valid'){
          $event.target.submit();
        }
        $scope.text = '';

      }
    };
  }

Answer 2

在提交数据后尝试使用formAction：

$route.reload();

Answer 3

我认为你不需要进行整页刷新。你有一个我假设的单页应用程序;用它。尝试这样的事情：

<section class="contact">
<article>
    <h1>Contact</h1>
    <form role="form" name="contactForm" ng-submit="formSubmit(contactForm)">
        <div class="form-group">
            <input class="form-control" ng-model="name" name="name" id="name" type="text" placeholder="Name" required/>
        </div>
        <div class="form-group">
            <input class="form-control" ng-model="email" name="email" id="email" type="email" placeholder="Email Address" required/>
        </div>
        <div class="form-group">
            <textarea class="form-control" ng-model="message" name="message" id="message" rows="5"></textarea>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-primary btn-lg">Send Message</button>
            <a class="btn btn-default btn-lg" href='mailto:me@something.net'>Or email me</a>
        </div>
    </form>
</article>

'use strict';

MyApp.controller('ContactController', function ContactController ($scope, EmailService) {
$scope.formSubmit = function(form) {

    EmailService.send(form).then(function(data) {

        if(data.message.sent) {
            $scope.resetForm();
            alert("Message Sent");
        }
        else {
            alert("Something went wrong. Try emailing me.");
        }
    });
}

$scope.resetForm = function() {
    $scope.name = "";
    $scope.email = "";
    $scope.message = "";
}
});

MyApp.factory('AjaxService', function AjaxService ($q, $http) {
return {
    http: function(ajaxParams) {
        var deferred = $q.defer();

        $http(ajaxParams)
            .success(function (data, status, headers, config) {
                deferred.resolve({
                    success: true,
                    status: status,
                    message: data
                });
            })
            .error(function (data, status, headers, config) {
                deferred.reject({
                    success: false,
                    status: status,
                    message: "Http Error"
                });
            });

        return deferred.promise;
    }
}
});

MyApp.factory('EmailService', function EmailService (AjaxService) {

return {
    send: function(emailData) {

        var ajaxParams = {
            method: 'POST',
            url: ''//where ever your form handler is,
            data: {
                name: emailData.name.$modelValue,
                email: emailData.email.$modelValue,
                message: emailData.message.$modelValue
            },
            cache: false
        }

        return AjaxService.http(ajaxParams);
    }
}
});

使用ng-submit提交表单并触发同步发布请求

3 个答案: