How to pass data between multiple form views in angulars

Question

I have a multi step form in angularjs. I am using ui-router for routing between different views and ngResource for sending data to mongodb. my problem is that I am not able to send the all the values of form directly into database since form is split into multiple views. when I submit the form with ng-submit, only the values of that view is being sent to database.

index.html

 <body>
  <div ui-view></div>
 </body>

multiple views (register.html)

    <div class="row">
    <div>
    <div id="form-container">
        <div class="page-header">
            <h2 class="text-center">Enter the following details</h2>
             <!-- the links to our nested states using relative paths -->
        <!-- add the active class if the state matches our ui-sref -->
            <div id="status-buttons" class="text-center link-colors">
                <a ui-sref-active="active" ui-sref="/registration_form.signUp"><span>1</span> Setup</a>
                <a ui-sref-active="active" ui-sref="/registration_form.personalDetails" ng-disabled="myForm.email.$invalid"><span>2</span> Personal Details</a>

            </div>
        </div>

    </div>
   </div>
</div>
<div class="container">
<form name="myForm" role="form" class="form-horizontal" id="signup-form" ng-submit="createMeetup()" enctype="multipart/form-data" novalidate>
               <!-- our nested state views will be injected here -->

 <div class="form-elements" id="form-views" ui-view></div>
 </form>
 </div>
 <div class="container">
    <form name="myForm" role="form" class="form-horizontal" id="signup-form" ng-submit="createMeetup()" enctype="multipart/form-data" novalidate>
               <!-- our nested state views will be injected here -->
<div class="form-elements" id="form-views" ui-view></div>
</form>
</div>

inside this view there will be two form views

signUP.html

    <label >Email</label>
    <div >
        <input type="email" name="email" ng-model="employeeEmail" placeholder="email" class="form-control" required>
        <span ng-show="myForm.email.$error.email">Invalid Email.</span>
    </div>
    <a ui-sref="/registration_form.personalDetails">next section</a>

personalDetails.html

<label>First Name</label>
    <div >
        <input type="text" ng-model="first_name" class="form-control">
    </div>
 <button type="submit" name="submit">save</button>

I have written the following controller: app.js

var app = angular.module('meetupApp', ['ngResource','ui.router']);
app.controller('mainCrl', ['$scope', '$resource', '$location', function   ($scope, $resource, $location) {
   var Employee = $resource('/api/meetups');



  $scope.employees = [];

  $scope.nextPage = function(){
  $scope.email = $scope.employeeEmail;
  }

  $scope.createMeetup = function () {
  var employee = new Employee();
  employee.email = $scope.employeeEmail;

  employee.first_name = $scope.first_name;

  employee.$save(function (result) {


    });
  }
}]);
    app.config(function($stateProvider, $urlRouterProvider){
   $stateProvider
   .state('/',{
  url:'/',
  templateUrl:'index.html',
  controller: 'mainCrl'
})
.state('/registration_form',{
  url:'/registration_form',
  templateUrl: 'register.html',
  controller: 'mainCrl'
})
.state('/registration_form.signUp',{
  url:'/registration_form.signUp',
  templateUrl:'signUp.html',
  controller:'mainCrl'
  })
   .state('/registration_form.personalDetails',{
    url:'/registration_form.personalDetails',
    templateUrl:'personalDetails.html',
    controller:'mainCrl'
   })

  $urlRouterProvider.otherwise('/');
  });

so whenever I click the submit button only the values on the personalDetails.html view is saved in database.... the values of signUp.html view is lost while routing. how can I resolve this problem. Sorry of such a long question.

frank · Accepted Answer · 2015-06-02 22:05:17Z

1

Angular re-initializes the controller every time a different view is displayed. One way to keep around resident state would be to create an angular.service and inject it into your controller. A service is a singleton, an object instantiated only once, and it lives for the lifetime of your app.

app.service('formService', function() {
    this.data = null;
});

Then in your app.controller declaration, add formService

app.controller('mainCrl', ['$scope', '$resource', '$location', 'formService', 
    function ($scope, $resource, $location, formService) {
        formService.data = 'something';
});

answered Jun 2, 2015 at 22:05

frank

1,3421 gold badge10 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yash Over a year ago

Thanks for your reply. I am new to angularjs. Can you just guide me how can I achieve my functionality with services. I just need the email value to be passed to new view and when I hit submit even email value should be passed along with first_name

Yash · Accepted Answer · 2015-06-04 14:27:19Z

I just found answer to this question, just thought it might help others so posting it. We need to create two functions in our services. service in angularjs is a concept where data will be stored for the lifetime of an application, so we need to create two functions in our controllers to pass the data to our services and then in our services we need to write two functions to handle these data and keep it for the lifetime of an app.

first create service.js file:

var EmployeeService = angular.module('EmployeeService',[])
.service('AddEmployee', function($resource){
     var Employee = $resource('/api/meetups');
        var emp_email="";

    this.email = function(email){
        emp_email = email;
        return emp_email;

    };

    this.personal = function(first_name){
            var employee = new Employee();
            employee.email = emp_email;
            employee.first_name = first_name;
            employee.$save();
    };
});

Now email function in service will save the email data for the lifetime of app and personal function will save the first_name and at the same time it saves the value to database also.

The way we need to call this functions are through controllers: app.js

app.controller('mainCrl', ['$scope', '$resource', '$location', 'AddEmployee', function ($scope, $resource, $location, AddEmployee) {

  $scope.nextPage = function(){
  $scope.email = AddEmployee.email($scope.employeeEmail);
   };
  $scope.createMeetup = function(){
  $scope.first_name = AddEmployee.personal($scope.first_name);
  };
}]);

I hope my answer will help others!!

Collectives™ on Stack Overflow

How to pass data between multiple form views in angulars

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related