Radio Component API
The form_radio component is Vue.js driven child component of the matestack_form component and is used to collect user input.
1
matestack_form my_form_config do
2
form_radio key: :status, options: { 'active': 1, 'deactive': 0 }, #...
3
end
Copied!
All child components form_* (including this component) have to be placed within the scope of the parent form component, without any other Vue.js driven component like toggle, async creating a new scope between the child component and the parent form component! Non-Vue.js component can be placed between form and form_* without issues!
1
# that's working:
2
matestack_form some_form_config do
3
form_* key: :foo
4
toggle show_on: "some-event" do
5
plain "hello!"
6
end
7
end
8
9
# that's not working:
10
matestack_form some_form_config do
11
toggle show_on: "some-event" do
12
form_* key: :foo
13
end
14
end
Copied!

Parameters

key - required

Defines the key which should be used when posting the form data to the server.

options - required

Can either be an Array or Hash:
Array usage
1
matestack_form my_form_config do
2
form_radio key: :status, options: [0, 1]
3
end
Copied!
will render:
1
<input id="status_0" name="status_0" type="radio" value="0">
2
<label for="status_0">
3
0
4
</label>
5
<input id="status_1" name="status_1" type="radio" value="1">
6
<label for="status_1">
7
1
8
</label>
Copied!
Hash usage
1
matestack_form my_form_config do
2
form_select key: :status, options: { 'active': 1, 'deactive': 0 }
3
end
Copied!
will render:
1
<input id="status_1" name="status_active" type="radio" value="1">
2
<label for="status_1">
3
active
4
</label>
5
<input id="status_0" name="status_deactive" type="radio" value="0">
6
<label for="status_0">
7
deactive
8
</label>
Copied!
The hash values will be used as values for the options, the keys as displayed values.
ActiveRecord Enum Mapping
If you want to use ActiveRecord enums as options for your radio input, you can use the enum class method:
1
class Conversation < ActiveRecord::Base
2
enum status: { active: 0, archived: 1 }
3
end
Copied!
1
matestack_form my_form_config do
2
form_radio key: :status, options: Conversation.statuses
3
end
Copied!

disabled_values

NOT IMPLEMENTED YET

init

Defines the init value of the radio input. If mapped to an ActiveRecord model, the init value will be derived automatically from the model instance.
Pass in an Integer:
1
matestack_form my_form_config do
2
form_radio key: :status, [1,2,3], init: 1
3
end
Copied!

placeholder

Defines the placeholder which will be rendered as first, disabled option.

label

NOT IMPLEMENTED YET
You can also use the label component in order to create a label for this input.

Custom Radio

If you want to create your own radio component, that's easily done since v.1.3.0.
  • Create your own Ruby component:
app/matestack/components/my_form_radio.rb
1
class Components::MyFormRadio < Matestack::Ui::VueJs::Components::Form::Radio
2
3
vue_name "my-form-radio"
4
5
# optionally add some data here, which will be accessible within your Vue.js component
6
def vue_props
7
{
8
foo: "bar"
9
}
10
end
11
12
def response
13
# exactly one root element is required since this is a Vue.js component template
14
div class: "your-custom-markup" do
15
render_options
16
render_errors
17
end
18
end
19
20
end
Copied!
  • Create the corresponding Vue.js component:
Generic code:
app/matestack/components/my_form_radio.js
1
Vue.component('my-form-radio', {
2
mixins: [MatestackUiCore.componentMixin, MatestackUiCore.formRadioMixin],
3
data() {
4
return {};
5
},
6
methods: {
7
afterInitialize: function(value){
8
// optional: if you need to modify the initial value
9
// use this.setValue(xyz) in order to change the value
10
// this method can be used in other methods or mounted hook of this component as well!
11
this.setValue(xyz)
12
}
13
},
14
mounted: function(){
15
// use/initialize any third party library here
16
// you can access the default initial value via this.componentConfig["init_value"]
17
// if you need to, you can access your own component config data which added
18
// within the prepare method of the corresponding Ruby class
19
// this.componentConfig["foo"] would be "bar" in this case
20
}
21
});
Copied!
  • Don't forget to require the custom component JavaScript according to your JS setup!
  • Finally, use it within a matestack_form:
1
matestack_form some_form_config do
2
Components::MyFormRadio.(key: :foo, options: [1,2,3])
3
end
Copied!
Last modified 7mo ago