Support of the checked property for input of radio type

1

I am working on an application that will display lot of forms (around 52 to start with)… As any forms, those forms will contain text inputs, select boxes, radio buttons and so on.

In my application, I have a component that is in charge of displaying a compound object (label + input) and I recently has troubles with the checked state of the radio button. In my component I have a computed property ‘checked’ in charge of deciding whether that radio should be checked but the checked state does not get applied when I am using the {{input}} helper.

Checking the standard helpers on this page Input Helpers - Templates - Ember Guides does not indicate that the checked attribute is being natively supported. This sounds very odd to me since Radio buttons are very common in forms in general.

Below an extract of my current work:

/* form.hbs */

{{#r-form-group label='Type'}}
  {{r-form-control label='Natural Person' property=(concat 'owners:' index '/isNaturalPerson') value=true radioValue=o.isNaturalPerson}}
  {{r-form-control label='Legal Person' property=(concat 'owners:' index '/isNaturalPerson') value=false radioValue=o.isNaturalPerson}}
{{/r-form-group}}

r-form-control.js:

import Ember from 'ember';
import DebouncedInputValue from 'neubewertung/mixins/debounced-input-value';

const { computed, typeOf } = Ember;
export default Ember.Component.extend(DebouncedInputValue, {

  /* [...] */

  checked: computed('value', 'radioValue', function() {
    const { value, groupValue } = this.getProperties(['value', 'radioValue']);

    return value === groupValue;
  }),

  /* [...] */

});

/* radio.hbs */
/* With the following the input accepts the checked attribute */
<input
  type={{type}}
  id={{controlId}}
  class={{controlClassName}}

  checked={{checked}}
  name={{name}}
  value={{value}}
  tabindex={{tabindex}}>

{{r-label
  id=labelId
  for=controlId

  label=label}}

/* However with the following the checked attribute won't be passed to the compiled html */
{{input
  type=type
  id=controlId
  class=controlClassName

  radioValue=radioValue

  checked=checked
  name=name
  required=required
  value=value
  tabindex=tabindex}}

{{r-label
  id=labelId
  for=controlId

  label=label}}
2

AFAIK there’s no built-in radio input. But there’s an implementation here: Ember Radio Buttons See the linked issue for the background. Someone else may know more about whether radios will be included in CLI in the future.