CODEWITHSUNDEEP
ember.jsember-dataember-cli
Christian Fazzini
Christian Fazzini

Reputation: 19713

How do I clear the component form?

The following works. I can use my component to save new addresses. When the success promise is resolved, it transitions to the same route: _this.transitionToRoute('checkout.address.index')

The issue is, the form still contains the same values of the new address. I need to form to be cleared. How do I go about that?

// Controller
import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    save: function(address) {
      var _this = this;

      this.store.createRecord('address', address.getProperties('address1', 'address2', 'city', 'postalCode')).save().then(function(){
        _this.transitionToRoute('checkout.address.index');
      }, function() {
        // Need this promise, so we can render errors, if any, in the form
      });
    }
  }
});

// Template
{{address-form action='save'}}

// Component object
import Ember from 'ember';

export default Ember.Component.extend({
  address: function() {
    return Ember.Object.create();
  }.property(),

  actions: {
    save: function() {
      this.sendAction('action', this.get('address'));
    }
  }
});

// Component template
<form {{action 'save' on='submit'}}>
  <p>
    <label>Address:
      {{input value=address.address1 placeholder='11 Mars Street'}}
    </label>

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

  <p>
    {{input value=address.address2 placeholder='Bel Air 1 Village'}}

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

  <p>
    <label>City:
      {{input value=address.city placeholder='Makati'}}
    </label>

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

  <p>
    <label>Postal code:
      {{input value=address.postalCode placeholder='1209'}}
    </label>

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

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

Upvotes: 0

Views: 975

Answers (1)

Kori John Roys
Kori John Roys

Reputation: 2661

I'd suggest something like this (note, edited the code a little bit for readability):

export default Ember.Controller.extend({
  actions: {
    save: function(address, component) {
      var controller = this;
      var addressProperties = address.getProperties('address1', 'address2', 'city', 'postalCode');
      var newAddress = controller.store.createRecord('address', addressProperties);

      function onSuccess() {
        controller.transitionToRoute('checkout.address.index');
        component.reset());
      }

      function onFailure() {
        // Need this promise, so we can render errors, if any, in the form
      }

      newAddress.save().then(onSuccess, onFailure);
    }
  }
});

// Component object
import Ember from 'ember';

export default Ember.Component.extend({
  address: function() {
    return Ember.Object.create();
  }.property(),

  reset: function() {
    this.set('address', Ember.Object.create());
  },

  actions: {
    save: function() {
      var component = this;
      component.sendAction('action', component.get('address'), component);
    }
  }
});

Upvotes: 1

Related Questions