How do I pass the value of a query param into the form?

Question

My URL looks like http://localhost:4099/checkout/schedule/new?addressId=12 I am trying to pass the query param addressId to the form.

I've tried submitting it as a hidden input, but by the time it hits the save action. I check the Network tab of Ember inspector and this is what it is passing:

{"delivery":{"instructions":"foo","deliver_on":"bar","address_id":null}}

address_id is still null. What am I missing?

Full code below:

// app/pods/checkout/schedule/new/route.js
import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return this.store.createRecord('delivery');
    // return this.store.createRecord('delivery', { addressId: this.get('addressId')});
  },
  // Cleanup the controller, when you leave the new route so the stale new record is also
  // removed from the store.
  // You can also use https://github.com/dockyard/ember-data-route instead
  resetController: function (controller, isExiting) {
    var model = controller.get('model');

    if (!model.get('isDeleted') && isExiting && model.get('isNew')) {
      model.deleteRecord();
    } else {
      model.rollback();
    }
  }
});

// app/pods/checkout/schedule/new/controller.js
import Ember from 'ember';

export default Ember.Controller.extend({
  queryParams: ['addressId'],
  addressId: null,

  actions: {
    save: function() {
      var _this = this;

      // this.get('model').set('addressId', this.get('addressId'));
      this.get('model').save().then(function(){
        _this.transitionToRoute('checkout.address.index');
      }, function() {
        // Need this promise, so we can render errors, if any, in the form
      });

      return false;
    },
    cancel: function() {
      return true;
    }
  }
});

// app/pods/checkout/schedule/new/template.hbs
<form {{action "save" on="submit"}}>
  {{addressId}}
  {{input type="hidden" value=addressId}}

  <p>
    <label>Instructions:
      {{input value=model.instructions}}
    </label>

    {{#each error in errors.instructions}}
      <br />{{error.message}}
    {{/each}}
  </p>

  <p>
    <label>Deliver on:
      {{input value=model.DeliverOn}}
    </label>

    {{#each error in errors.DeliverOn}}
      <br />{{error.message}}
    {{/each}}
  </p>

  <input type="submit" value="Next"/>
  <button {{action "cancel"}}>Cancel</button>
</form>

// app/models/delivery.js
import DS from 'ember-data';

export default DS.Model.extend({
  address:      DS.belongsTo('address', { async: true }),
  items:        DS.hasMany('item', { async: true }),
  instructions: DS.attr('string'),
  deliverOn:    DS.attr('string')
});

Answer 1

I believe what's happening is that you are not really submitting your form. Instead, you are calling save() on your model, which submits your model data. Therefore, hidden parameter in the form will not help you here.

Your addressId in the URL is tied to your addressId property in the controller, where as the addressId: null you are seeing being submitted in Chrome is the value of addressId property in the model