Отправить форму с помощью ng-submit и запустить синхронный почтовый запрос

У меня есть форма, в которой я хочу инициировать проверку, когда пользователь нажимает кнопку «Отправить». Если проверка не пройдена, отображаются подходящие сообщения об ошибках. Это многое работает.

Однако, если проверка проходит успешно, я хочу, чтобы форма отправляла синхронный запрос POST с полной перезагрузкой страницы, как если бы параметры действия и метода были установлены как обычно.

Как можно запустить обычное действие публикации (не AJAX) из функции ng-submit в области AngularJS?

Моя форма, конечно, выглядит в основном следующим образом:

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

Лучшее, что я могу придумать, это отразить содержимое формы с помощью другой скрытой формы, отправляющей эту форму, но должен быть лучший способ!

ЧТОБЫ УТОЧНИТЬ: если проверка проходит успешно, мне нужно, чтобы отправка формы вела себя как обычная синхронная отправка формы публикации, которая переводит пользователя на страницу, возвращенную сервером из почтового запроса.


forms angularjs ng-submit
person Nat    schedule 14.03.2014    source источник

Ответы (3)


arrow_upward
6
arrow_downward

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

Пожалуйста, проверьте этот планкр

В основном я передаю объект $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 = '';

      }
    };
  }
person jintoppy    schedule 14.03.2014
comment
С оговоркой, что мне нужно динамически установить действие и метод для $event.target в formAction непосредственно перед вызовом $event.target.submit(), это именно то, что мне нужно, спасибо. - person Nat; 14.03.2014

arrow_upward
0
arrow_downward

Попробуйте внутри formAction после отправки данных:

$route.reload();
person Wawy    schedule 14.03.2014

arrow_upward
0
arrow_downward

Я не думаю, что вам нужно делать полное обновление страницы. Я предполагаю, что у вас есть одностраничное приложение; используй это. Попробуйте что-то вроде этого:

<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:[email protected]'>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);
    }
}
});
person Jordan Papaleo    schedule 14.03.2014