emberjs: Passing selected value to select field in form

Question

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.

score 5 · Answer 1 · answered Oct 07 '19 at 20:57

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;
  }
}

score 2 · Answer 2 · answered Sep 26 '19 at 06:30

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.

Thank you for your reply Ahmet. Unfortunately that made no difference at all. The selected value is not being transferred through to the component when the record is entered. — Brad Stammers, Sep 30 '19 at 04:53

emberjs: Passing selected value to select field in form

2 Answers2