-
Notifications
You must be signed in to change notification settings - Fork 2
Home
The plugin consists from the following conditional parts:
- Fields (Autocomplete, Checkbox, Datepicker, Input, Radio, Select, Switch, Taginput, Timepicker and Upload). Everything is simple here, it's the form fields that get user input or interact with one by using standard UI form elements such as inputs, textareas, etc.
- Wrappers (Block, Field). This components wrap the fields to extend their functionality or change behavior. Use ones when you need, for example, to show errors of the field(s) or modify display properties of the set of fields or something else of the same kind. It's recommended to use the wrapper (builtin attribute) when the business logic are missing at all.
- Controls (Area, Button, Span and UploadList). It's used as controls for the Field or another component(s).
It's necessary to understand the purpose of the foregoing parts to be able to quick setup a form.
The plugin's API are so simple therefore it's easy to use. To configure a form first of all it's need to config the fields. It should be done with a configuration object for each field. Please, look at the following examples to have an insight:
...
fields: [
{
key: 'email',
type: 'input',
required: true,
wrapper: '<div class="block"></div>',
templateOptions: {
// Configuration of the field should be here
}
}
]
The configuration of any field has hierarchical structure and some rules:
- field may contain configuration of the wrapper
- wrapper may contain configuration of the controls
Look below for detailed explanation of a configuration object for each component.
Configuration of a field lays in the root of the templateOptions
property:
...
fields: [
{
...
templateOptions: {
// Configuration of the field should be here
}
}
]
Configuration of a wrapper lays in the wrapper
property of the field configuration:
...
fields: [
{
...
templateOptions: {
...
wrapper: {
// Configuration of the wrapper should be here
}
}
}
]
Configuration of a control lays in the controls
property of the wrapper configuration:
...
fields: [
{
...
templateOptions: {
...
wrapper: {
controls: [
{
// Configuration of the control should be here
},
{
// Add several controls if you need
}
]
}
}
}
]
You already know where configuration properties should lay. The following step is to explore each plugin part (field, wrapper, control) in depth to learn what things may contain the configuration object to be able to properly config your form.
You may see the "Supported Buefy features" anchor for each field below. It's the functionality capabilities you need in most cases. If you have conceived tricky things it's possible to do through Formly custom layouts.
Required properties are marked with wildcard character (*).
- Object array
- Async with custom template
autocomplete
autocomplete-with-field
- events:
Object<function>
- filter:
function
- properties:
Object
- events:
Object<function>
- filter:
function
- properties:
Object
- wrapper:
Object
- controls:
Array<Object>
- options:
Object
- position:
String
* - type:
Object
*
- options:
- properties:
Object
- controls:
- Grouped (Array)
- Sizes
- Checkbox Button
checkbox
checkbox-with-block
checkbox-with-field
checkbox-button
checkbox-button-with-field
- events:
Object<function>
- label:
String
* - properties:
Object
- childNodesWrapper:
String
- options:
Array<checkbox>
* - wrapper:
Object
- properties:
Object
- properties:
- childNodesWrapper:
String
- options:
Array<checkbox>
* - wrapper:
Object
- controls:
Array<Object>
- options:
Object
- position:
String
* - type:
Object
*
- options:
- properties:
Object
- controls:
- events:
Object<function>
- icon:
String
- label:
String
* - properties:
Object
- childNodesWrapper:
String
- options:
Array<checkbox-button>
* - wrapper:
Object
- controls:
Array<Object>
- options:
Object
- position:
String
* - type:
Object
*
- options:
- properties:
Object
- controls:
- Non read-only
- Range
- Footer
- Inline
- Events
datepicker
datepicker-with-field
- events:
Object<function>
- properties:
Object
- events:
Object<function>
- properties:
Object
- wrapper:
Object
- controls:
Array<Object>
- options:
Object
- position:
String
* - type:
Object
*
- options:
- properties:
Object
- controls:
- Types & States
- Icons
- Validation
- Password
- Sizes
input
input-with-field
- events:
Object<function>
- properties:
Object
- events:
Object<function>
- properties:
Object
- wrapper:
Object
- controls:
Array<Object>
- options:
Object
- position:
String
* - type:
Object
*
- options:
- properties:
Object
- controls:
- Sizes
- Radio Button
radio
radio-with-block
radio-with-field
radio-button
radio-button-with-field
- events:
Object<function>
- label:
String
* - properties:
Object
- childNodesWrapper:
String
- options:
Array<radio>
* - wrapper:
Object
- properties:
Object
- properties:
- childNodesWrapper:
String
- options:
Array<radio>
* - wrapper:
Object
- controls:
Array<Object>
- options:
Object
- position:
String
* - type:
Object
*
- options:
- properties:
Object
- controls:
- events:
Object<function>
- icon:
String
- label:
String
* - properties:
Object
- childNodesWrapper:
String
- options:
Array<radio-button>
* - wrapper:
Object
- controls:
Array<Object>
- options:
Object
- position:
String
* - type:
Object
*
- options:
- properties:
Object
- controls:
- Multiple
- Icons
- Sizes
select
select-with-field
- events:
Object<function>
- options:
Array<String|Object>
- text:
String
- value:
String
- text:
- properties:
Object
- events:
Object<function>
- options:
Array<String|Object>
- text:
String
- value:
String
- text:
- properties:
Object
- wrapper:
Object
- controls:
Array<Object>
- options:
Object
- position:
String
* - type:
Object
*
- options:
- properties:
Object
- controls:
- Types
- Sizes
switch
- events:
Object<function>
- label:
String
- properties:
Object
- Multiple
- Icons
- Sizes
taginput
taginput-with-field
- events:
Object<function>
- filter:
function
- properties:
Object
- events:
Object<function>
- filter:
function
- properties:
Object
- wrapper:
Object
- controls:
Array<Object>
- options:
Object
- position:
String
* - type:
Object
*
- options:
- properties:
Object
- controls:
- Multiple
- Icons
- Sizes
timepicker
timepicker-with-field
- events:
Object<function>
- properties:
Object
- events:
Object<function>
- properties:
Object
- wrapper:
Object
- controls:
Array<Object>
- options:
Object
- position:
String
* - type:
Object
*
- options:
- properties:
Object
- controls:
- Drag and drop
upload
upload-with-field
- button:
Object
- options:
Object
- type:
Object
*
- options:
- events:
Object<function>
- properties:
Object
- button:
Object
- options:
Object
- type:
Object
*
- options:
- events:
Object<function>
- properties:
Object
- wrapper:
Object
- controls:
Array<Object>
- options:
Object
- position:
String
* - type:
Object
*
- options:
- properties:
Object
- controls:
There are a few wrappers (Block, Field). To use wrapper just add a suffix -with-<WRAPPER_NAME>
in the field type (for example, input-with-field
).
checkbox
radio
- wrapper:
Object
- properties:
Object
- properties:
- Addons
- Groups
- Positions
- Combining addons and groups
- Horizontal
autocomplete
checkbox
checkbox-button
datepicker
input
radio
radio-button
select
taginput
timepicker
upload
- wrapper:
Object
- controls:
Array<Object>
- options:
Object
- position:
String
* - type:
Object
*
- options:
- properties:
Object
- controls:
Use it in simple cases only! It's recommend to design custom Formly layout if you have a complex control with advanced event handlers (e.g. tricky dropdown or something similar).
*-with-field