foobar true foo Chocolate Coconut Mint Strawberry Vanilla

The fx-control element

fx-control is a generic control.

Its purpose is to bind a 'widget' to the model of the form. The widget is that part of the control that the user actually interacts with.

Examples

These are just a few examples (more to come). The concept of fx-control is to wrap any kind of control as long as it emits an event when it changes and has a defined 'value' property.

Native input

If nothing is given a native input will be created as widget by default, listening for the blur event to update the bound node.

Customizing the event - firing on 'input' event

Use update-event attribute to change the event to listen for.

In this case each keystroke will update the model (fire an input event). Notice the other inputs on the page updating themselves as they are all bound to the same node.

The fx-message action listens for a value-changed event and outputs the current value of the control.

Customizing the widget

By adding a CSS class "widget" you can use any other HTML element and mark it as the widget. Fore will then look for a value of that element and add an eventlistener on that element.

This example uses a textarea as the widget. See below for more examples.

Using an fx-control with debounce

if using input events, debounce allows to delay the call to the update handler to mimize event processing

Using a checkbox

Native select

Datalist

Datalist (autocomplete) - dynamic

Wrapped paper controls