ember-bootstrap - rendering "radio" inputs

Question

Using the Ember addon ember-bootstrap I can make a set of radio buttons like this :

{{form.element controlType="radio" label="Fruit Type" property="radio" options=radioOptions optionLabelPath="label"}}

with a Controller that looks like this :

export default Controller.extend({

  init() {
    this._super(...arguments);
    this.radioOptions = [
      {
        label: 'Citrus',
        value: 'C',
        inline: true
      },
      {
        label: 'Non-Citrus',
        value: 'N',
        inline: true
      }
    ];
  }

});

The relevant doco is here https://www.ember-bootstrap.com/#/components/forms .

However what I can't do is provide a custom value to each radio button so that I end up with rendered HTML like this :

  <label>Citrus</label>  
  <input type="radio" value="C">
  <label>Non-Citrus</label>  
  <input type="radio" value="N">

I have looked at "Custom Controls" on https://www.ember-bootstrap.com/#/components/forms but I can't see how that applies to this case.

EDIT: Just to be clearer about why I want to do this I want to display the readable label (eg "Citrus") but have the non-readable value ("C") available to send back to the server (because the server thinks in terms of "C" or "N".

It's not essential I could send "Citrus" back and map it around on the server but I just thought this would be very straightforward.

Looking at the part of the doco starting with "You can also just customize the existing control component:" on https://www.ember-bootstrap.com/#/components/forms it does seem like you should be able to do the sort of thing I'm after but the example shown doesn't address the use of a value attribute and I can't figure out how to .

Could you please describe your use case? Why do you need to set that `value` attribute on `input` element in the first case? Is this only about rendering correct HTML or are you trying to actual use that value for updating `property` if the radio is selected? — jelhan, May 24 '19 at 09:57
@Jelhan : Thanks for your comment. I'm just going to edit the question to address your question. — glaucon, May 27 '19 at 05:51
Did you considered using a computed property to map selected `radioOption` to `value` of your model? Similar to what I've described [here](https://stackoverflow.com/questions/56253685/is-it-possible-to-pass-multiple-arguments-to-onchange-action-in-ember-power-sele/56255640#56255640)? — jelhan, May 27 '19 at 13:09

Joe Hany · Answer 1 · 2019-05-25T17:38:14.590

2

You don't need to have the HTML rendered like that. if you want to access the checked radio, simply it is the property name dot value like radio.value.

Here how to get it in the on submit action:

  actions: {
    onSubmit() {
      alert(this.radio.value)
    }
  }

edited May 25 '19 at 17:38

answered May 25 '19 at 01:12

Joe Hany

1,015
1
8
14

thanks for your reply. I do appreciate it but I don't think I made myself clear so I'm about to edit the question. Thanks. – glaucon May 27 '19 at 05:50
That will do the job `radio.value` will have the value that you need `C` or `N`.. etc – Joe Hany May 28 '19 at 22:44

Neil Wheatley · Answer 2 · 2019-09-23T14:41:31.103

I had exactly the same issue but I finally solved it. You have to use form.element in block mode. Why is it also necessary to also write an action to update the value? I have no idea!

In my implementation, I'm using Ember changesets and my property is called usageType. I hope it's clear enough to adapt for your needs.

I'm also using Ember Truth Helpers, which is what the {{eq opt.value el.value}} part is. It sets checked to true if the input value is equal to the current-selected value.

# my-component.js

actions: {
  selectUsageType(option) {
      return this.set('changeset.usageType', option);
    }
}

# usage-type-options.js (imported in component JS)

[{
  label: 'First label',
  value: 'A'
},
{
  label: 'Second label',
  value: 'B'
}]

# Etc.

# my-component.hbs

# I'm not using angle-bracket invovation here, oops

{{#form.element
  property="usageType"
  label="My label" as |el|
}}
  {{#each usageTypeOptions as |opt|}}
    <div class="form-check">
      <input
        type="radio"
        class="form-check-input"
        id="{{el.id}}-{{opt.value}}"
        checked={{eq opt.value el.value}}
        onchange={{action "selectUsageType" opt.value}}
      >
      <label for="{{el.id}}-{{opt.value}}" class="form-check-label">
        {{opt.label}}
      </label>
    </div>
  {{/each}}
{{/form.element}}

ember-bootstrap - rendering "radio" inputs

2 Answers2