How do i correctly use onChange event in ember-bootstrap

Hello.

I’m using ember-bootstrap 5.1.1 to construct a form. I am using the radio form.element and a checkbox form.element. The checkbox items depends on what was selected in radio form.element (basically similar to a filtered or cascading select). When an option is selected in the radio control, I want to call an event handler that filters the items displayed in the checkboxes.

I have some code that invokes the event handler as expected, the parameter passed to the event handler (an Event object) doesn’t contain the value of the selected radio button. How can i get the value of the selected radio button when the ‘change’ event handler is called?

Here’s a simplified version of the ember-bootstrap form template:

<BsForm @formLayout="vertical" @model={{this}} @onSubmit={{this.submit}} as |form|>
      <form.element @controlType="radio" @label="Category" @property="radio" @options={{@model}} @optionLabelPath="name" {{on "change" (fn this.onRadioButtonChange)}}/>
      <form.element @controlType="checkbox" @label="Tags" @property="checkbox" />
      <form.submitButton>Submit</form.submitButton>
    </BsForm>

And here is the controller:

import Controller from '@ember/controller';
import { action } from '@ember/object';

export default class ItemsCreateController extends Controller {

    @action   
    onRadioButtonChange(val) {
        debugger;
        console.log("selected category: " + val);

    }
}

you can use label value as follow: console.log("selected category: " + val.target.parentNode.innerText);

1 Like