CODEWITHSUNDEEP
ember.jsember-dataember-cli
Nirmalya Ghosh
Nirmalya Ghosh

Reputation: 2530

Ember js form retains old values

I tried other answers here on SO but none of them helped.

app/routes/card/new.js

actions: {
  save(title, description) {
    const newCard = this.get('store').createRecord('card', { title, description } );
    newCard.save().then((card) => {
      this.transitionTo('card.card', card);
    });
  }
}

For the view, I've:

app/templates/card/new.hbs

<form>
  <fieldset class="form-group">
    <label for="card-title">Card Title</label>
    {{input type="text" value=title class="form-control" id="card-title" placeholder="Enter the title of the card"}}
    <small class="text-muted">Give your card a nice title</small>
  </fieldset>

  <fieldset class="form-group">
    <label for="card-description">Card Description</label>
    {{textarea value=description class="form-control" id="card-description" rows="3"}}
    <small class="text-muted">Describe your card</small>
  </fieldset>

  <div class="btn-group" role="group" aria-label="Save or Cancel your card">
    <button {{action 'save' title description}} class="btn btn-secondary">Save</button>
    <button {{action 'cancel'}} class="btn btn-danger">Cancel</button>
  </div>
</form>

When I create a card, it works fine but when I again try creating a new car, the form retains the old values which disappears on refresh.

Upvotes: 1

Views: 362

Answers (1)

Ebrahim Pasbani
Ebrahim Pasbani

Reputation: 9396

app/routes/card/new.js

model(){
  return this.get('store').createRecord('card');
}

app/controllers/card/new.js

actions: {
  save(){
   this.get('model').save().then((card) => {
      this.transitionTo('card.card', card);
    });
}
}

app/templates/card/new.hbs

<form>
  <fieldset class="form-group">
    <label for="card-title">Card Title</label>
    {{input type="text" value=model.title class="form-control" id="card-title" placeholder="Enter the title of the card"}}
    <small class="text-muted">Give your card a nice title</small>
  </fieldset>

  <fieldset class="form-group">
    <label for="card-description">Card Description</label>
    {{textarea value=model.description class="form-control" id="card-description" rows="3"}}
    <small class="text-muted">Describe your card</small>
  </fieldset>

  <div class="btn-group" role="group" aria-label="Save or Cancel your card">
    <button {{action 'save'}} class="btn btn-secondary">Save</button>
    <button {{action 'cancel'}} class="btn btn-danger">Cancel</button>
  </div>
</form>

Upvotes: 1

Related Questions