CODEWITHSUNDEEP
angularjs
birdy
birdy

Reputation: 9636

How to pre-populate form-fields with data from another page

I haven an angularJS form that looks like this

<section>

  <form role="form" ng-if="authenticated != true" 
     name="registerForm" ng-submit="register(registerForm)" novalidate>
   <input type="email" class="form-control" ng-model="user.email" name="email" >
    <input type="email" class="form-control" ng-model="user.password1" name="email" >
    <input type="email" class="form-control" ng-model="user.password2" name="email" >
  </form>
</section>

And the javascript:

    'register': function(username,password1,password2,email,more){
        var data = {
            'username':username,
            'password1':password1,
            'password2':password2,
            'email':email
        }
        data = angular.extend(data,more);
        return this.request({
            'method': "POST",
            'url': "/registration/",
            'data' :data
        });
    },

I have another form on the landing page with fields email and a button. When I press the button I want the user to be direction to the above page with the email field pre-populated. How would I accomplish this?

Upvotes: 1

Views: 3323

Answers (1)

Cliff
Cliff

Reputation: 162

If you would like to take the URL parameter route, try something like this:

In your landing page, add this code to the function that your button triggers:

$location.path("/form").search("email",ctrl.email);

Where "/form" is the path to your form page and ctrl.email is your ng-model for the email field in your landing page.

Then on your form page's controller, add this:

var pathQueryVals = $location.search();
if (!!pathQueryVals.email){
      user.email = pathQueryVals.email;
}

This will pull the query parameters from your path and if 'email' exists, then it will assign that value to your user.email field and pre-populate the field.

Upvotes: 1

Related Questions