Input Component API
The form_input 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_input key: :foo, type: :text, #...
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.

type - required

Pass in as symbol. Defines the type of the input. All HTML input types are supported.

placeholder

Defines the placeholder.

label

Defines the label which will be rendered right before the input tag. You can also use the label component in order to create more complex label structures.

required

If set to true, HTML validations will be triggered on form submit.

init

If given, this value will be the initial value of the input. If used in an edit form of a given ActiveRecord model, the init value will be automatically derived from the model itself.

File Upload

Don't forget to add the multipart: true attribute to your form_config in order to enable file uploads!
In order to perform a single file upload, add this form_input component
1
form_input key: :some_file, type: :file
Copied!
In order to perform multiple file uploads, add this form_input component
1
form_input key: :some_files, type: :file, multiple: true
Copied!
Don't forget to add the multiple: true attribute to your form_config in order to enable multi file upload!
In order to accept multiple files, you should permit params on your controller like:
some_controller.rb
1
#...
2
params.require(:my_form_wrapper_key).permit(
3
:some_file,
4
some_files: []
5
)
6
#...
Copied!
Please be aware that the form_input components with a type: :file can not be initialized with a given file.

Range Input

Whilst working similiar to the 'text' input, the range input accepts a few more parameters. It accepts also 'min', 'max', 'step', 'list' as optional parameters.
with max, min, step set
1
form_input id: 'range-input', type: :range, min: 0, max: 100, step: 1
Copied!
with corresponding datalist
To use a datalist for the range input specify the 'list' parameter with the id of the provided datalist
1
form_input id: 'range-input', type: :range, list: 'datalist-id'
2
datalist id: 'datalist-id' do
3
option value: 10
4
option value: 20
5
end
Copied!

Custom Input

If you want to create your own input component, that's easily done since v.1.3.0. Imagine, you want to use flatpickr and therefore need to adjust the input rendering and need to initialize the third party library:
  • Create your own Ruby component:
app/matestack/components/my_form_input.rb
1
class Components::MyFormInput < Matestack::Ui::VueJs::Components::Form::Input
2
3
vue_name "my-form-input"
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 do
15
label "my form input"
16
input input_attributes.merge(class: "flatpickr")
17
render_errors
18
end
19
end
20
21
end
Copied!
  • Create the corresponding Vue.js component:
Generic code:
1
Vue.component('my-form-input', {
2
mixins: [MatestackUiCore.componentMixin, MatestackUiCore.formInputMixin],
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!
In order to support the flatpickr library, you would do something like this:
app/matestack/componenst/my_form_input.js
1
Vue.component('my-form-input', {
2
mixins: [MatestackUiCore.componentMixin, MatestackUiCore.formInputMixin],
3
data() {
4
return {};
5
},
6
mounted: function(){
7
// flatpickr needs to be required according to your JS setup
8
flatpickr(this.$el.querySelector('.flatpickr'), {
9
defaultDate: this.props["init_value"],
10
enableTime: true
11
});
12
}
13
});
Copied!
  • Don't forget to require the custom component JavaScript according to your JS setup!
  • Finally, use it within a form:
1
matestack_form some_form_config do
2
Components::MyFormInput.(key: :foo, type: :text)
3
end
Copied!
Last modified 7mo ago