Textarea Component API
1
matestack_form my_form_config do
2
form_textarea key: :foo, #...
3
end
Copied!

Parameters

key - required

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

placeholder

Defines the placeholder.

label

Defines the label which will be rendered right before the textarea 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.

Custom Textarea

If you want to create your own textarea component, that's easily done since v.1.3.0.
  • Create your own Ruby component:
app/matestack/components/my_form_textarea.rb
1
class Components::MyFormTextarea < Matestack::Ui::VueJs::Components::Form::Textarea
2
3
vue_name "my-form-textarea"
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 text: "my form textarea"
16
textarea textarea_attributes
17
render_errors
18
end
19
end
20
21
end
Copied!
  • Create the corresponding Vue.js component:
app/matestack/componenst/my_form_textarea.js
1
Vue.component('my-form-textarea', {
2
mixins: [MatestackUiCore.componentMixin, MatestackUiCore.formTextareaMixin],
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::MyFormTextarea.(key: :foo)
3
end
Copied!
Last modified 7mo ago