Possibility to use custom web components

[colmexdev]

Hi there.

Sorry for bothering once again. This time, I'm wondering if there's a way to extend formatters/serializers to use custom web components (e.g. a custom-made number selector or a custom calendar selector). Or otherwise, if there could be a way to achieve something like that.

Thanks in advance!

[jeremyevans]

Yes, you can override both the formatter and serializer in a similar way to how the error_handler is overrridden.

[colmexdev]

If, for example, I have a custom element called number-picker and want the form to display it via f.input(:field, attr1: "1" attr2: "false", ...) so in the rendered form it should display something like:

<number-picker attr1="1" attr-2="false"...>
  <input type="number" id="object_field"name="object[field]" ...>
</number-picker>

What would be the way to implement it? Considering that, to handle gracefully degradation, that custom element should have a starting HTML content by default. One way I think that could work is by setting a custom wrapper but exclusively for the input tag; nonetheless, I didn't find a way to wrap the input exclusively.

[jeremyevans]

Looks you want a custom wrapper, not a custom formatter or serializer:

Forme.register_transformer(:wrapper, :number_picker, Forme::Wrapper::Tag.new("number-picker"))
Forme.form do |f|
  f.input(:field, :wrapper=>:number_picker, :wrapper_attr=>{:attr1=>'1', :attr2=>'false'})
end.to_s
# <form><number-picker attr1="1" attr2="false"><input type="field"/></number-picker></form>

[colmexdev]

It worked like a charm! Thank you very much! 😀