How to pass input data from template to the component class in ember?

Question

I am trying to pass the data which is in the input field to the component class

This is my component-class alpha.js

@tracked choice;

    @action next() {

        console.log(this.choice);
    }

This is my template alpha.hbs

    <Input @value={{this.choice}} type="radio"  />
    <button onclick={{action 'next'}}>Next</button>

So far it is returning empty.

Any help would be appreciated. Thanks

Answer 1

The <Input component is designed to text inputs. For radio buttons you need to do some manual work. A simple approach could look like this:

<input value="one" type="radio" {{on "change" this.change}} />
<input value="two" type="radio" {{on "change" this.change}} />
<button onclick={{action 'next'}}>Next</button>

With this change action:

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