将同级div添加到Ember Form中作为输入元素

Question

I am using Ember Form For and I want to know if it is possible to add a sibling element.

Currently doing this: {{f.radio-field "gender" "female"}}

will render this:

<div>
  <label><input type="radio" value="female" />Female</label>
</div>

I need a container sibling element which I can add CSS pseudo classes to. I am unable to target parent containers of the input hence why I need a sibling element. So something like this is what I am after:

<div>
  <label>
    <input type="radio" value="female" />
    Female
    <div class="someClass></div>
  </label>
</div>

Answer 1

Updated answer

This addon seems to have support for custom components, it could be found in old docs and in source code

Old answer (probably wouldn't work properly for this specific addon)

Theoretically, it should be possible to create your own component (ie my-radio-field ) by extending https://github.com/martndemus/ember-form-for/blob/master/addon/components/form-fields/radio-field.js and replacing layout

Component code:

import Component from 'ember-form-for/components/form-fields/radio-field';
import layout from 'my-project-name/templates/components/my-radio-field';

export default Component.extend({layout});

Template:

{{#form-field propertyName
    class="radio-field"
    classNames=fieldClasses
    errorClasses=errorClasses
    hintClasses=hintClasses
    inputClasses=inputClasses
    labelClasses=labelClasses
    object=object
    hint=hint
    form=form
    label=labelText
    control=control
    update=(action update) as |f|}}
  {{#f.label required=required}}
    {{f.control
        option=value
        accesskey=accesskey
        autocomplete=autocomplete
        autofocus=autofocus
        autosave=autosave
        dir=dir
        disabled=disabled
        hidden=hidden
        lang=lang
        list=list
        required=required
        tabindex=tabindex
        title=title
    }}
    {{f.labelText}}
    <div>Hello world</div>
  {{/f.label}}
  {{f.errors}}
  {{f.hint}}
{{/form-field}}