CODEWITHSUNDEEP
ruby-on-railsember.js
Brad Stammers
Brad Stammers

Reputation: 15

emberjs: Passing selected value to select field in form

I am attempting to add a SELECT field from first principles using ember and am having difficulty working out how to pass the currently selected option to a form when editing a record.

I have set the form up as a component and am able to use it successfully when creating a new record, with the selected value being passed to the Rails backend. My issue is that I cannot work out a way to apply this selected value to the form component when editing an existing record.

Here is the component template section (book-form.hbs):

  <div class="form-group">
    <select id="format" onchange={{action 'updateValue' value='target.value'}}>
      <option value=""></option>
      <option value="Paperback">Paperback</option>
      <option value="Hardcover">Hardcover</option>
      <option value="E-Book">E-Book</option>
    </select>

Template code (book-form.js):

import Component from '@ember/component';

export default Component.extend({
  actions: {
    submitChange(param) {
      this.onSave(param, this.selectedOpt);
    },
    selectedOpt: "",
    updateValue(value) {
      this.set('value', value);
      this.selectedOpt = value;
    },
  }
});

new & edit templates:

{{book-form onSave=(action 'saveBook') model=model}}

new controller:

export default Controller.extend({
  actions: {
    saveBook(newBook,format) {
      var tmp = this.store.createRecord('book', {
        title: newBook.title,
        author: newBook.author,
        genre: newBook.genre,
        format: format,
      });
      tmp.save();
      this.transitionToRoute('books.list');
    }
  }
});

edit controller:

  actions: {
    saveBook(book) {
      book.save();
      this.transitionToRoute('books.list');
    }
  }

I know I'm missing something somewhere to pass the model value through to the component but am not sure how to do it or where it belongs.

I would appreciate any assistance at all.

Upvotes: 1

Views: 1646

Answers (2)

NullVoxPopuli
NullVoxPopuli

Reputation: 65093

If anyone looking at this question is using Ember Octane (3.14+)

This'd be what you want (based on @AhmetEmre's answer):

The Template:

<select id="format" {{on 'change' this.updateValue}}>
  <option value=""></option>
  <option value="Paperback" selected={{eq this.value "Paperback"}} >Paperback</option>
  <option value="Hardcover" selected={{eq this.value "Hardcover"}} >Hardcover</option>
  <option value="E-Book" selected={{eq this.value "E-Book"}}>E-Book</option>
</select>

The JS for the component:

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class MyComponent extends Component {
  @tracked value = 'Hardcover';

  @action updateValue(event) {
    this.value = event.target.value;
  }
}

Upvotes: 5

Ahmet Emre Kilinc
Ahmet Emre Kilinc

Reputation: 6885

HTML select element's default value can be achieved by using selected argument in option tag.

So your template .hbs will be like:

<select id="format" onchange={{action 'updateValue'}}>
  <option value=""></option>
  <option value="Paperback" selected={{eq value "Paperback"}} >Paperback</option>
  <option value="Hardcover" selected={{eq value "Hardcover"}} >Hardcover</option>
  <option value="E-Book" selected={{eq value "E-Book"}}>E-Book</option>
</select>

and your component.js will be like:

value: 'Hardcover', 

actions: {
  updateValue(event){
    this.set('value', event.target.value); 
  }
}

You can take a look at this twiddle for example usage. By the way, this example depends on ember-truth-helpers addon by using eq helper.

Upvotes: 2

Related Questions