0

I have a form with some fields. When user fills all fields and submits the form, I force user to register or login(in modal window) before form submission.

That is, when user try to submit the form, I first open a modal window with login form(user can toggle register/login form). After user complete the login/register form and submit it, I send all data using ajax and after I get a success status, I submit the previous form using jQuery's $("formID").submit() event.

Now as I am migrating from jQuery to angularJS I have tried to find a solution to do that using angularJS, I have completed the user registration/login part using angularJS's $http service, but have failed to submit the previous form data.

Is there any angularJS solution to that kind thing? Is it possible to submit a form with its ID or something like this?

4

2 回答 2

2

检查这个http://docs.angularjs.org/api/ng.directive:ngSubmit

<form ng-submit="{expression}">
   ...
</form>
于 2013-09-05T06:20:38.817 回答
0

我相信我已经完成了你要求的一切。现场演示（点击）。

  <div ng-show="successMessage">
    <p>{{successMessage}}</p>
    <h6>Form data sent:</h6>
    <p ng-repeat="(k,v) in form track by k">{{k}}: {{v}}</p>
  </div>
  <form ng-submit="mySubmit()" ng-hide="modalOpen||successMessage">
    <input ng-model="form.name" placeholder="Name">
    <input ng-model="form.phone" placeholder="Phone Number">
    <input type="submit">
  </form>
  <div ng-show="modalOpen">
    <h6>This would be your modal.</h6>
    <p>Login to submit form!<p>
    <button ng-click="login()">Login</button>
  </div>

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

app.controller('appCtrl', function($scope) {
  $scope.form = {
    name: '',
    phone: ''
  };
  $scope.modalOpen = false;
  $scope.mySubmit = function() {
    $scope.modalOpen = true; 
  };
  $scope.login = function() {
     $scope.loggedIn = true; //should come from a service and use promise, send form after promise resolves using .then()
    //dataService.sendForm() or however you want to submit the form. the same principle applies about using a promise and .then() function to set the successMessage and close modal.
    $scope.successMessage = 'Form is submitted!';
    $scope.modalOpen = false;
  };
});
于 2013-09-08T06:03:06.783 回答