2

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

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

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

当然，我的表格基本上如下所示：

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

我能想到的最好的办法是用另一个隐藏的表单提交该表单的内容来镜像表单的内容，但必须有更好的方法！

澄清：如果验证通过，我需要表单提交基本上表现得像一个正常的同步发布表单提交，它将用户放在服务器从发布请求返回的页面上。

4

3 回答 3

6

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 = '';

      }
    };
  }
于 2014-03-14T17:31:36.607 回答
0

提交数据后在 formAction 中尝试：

$route.reload();
于 2014-03-14T17:09:36.020 回答
0

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

<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);
    }
}
});
于 2014-03-14T17:11:26.373 回答