Widgets
Form
A form and its fields: labels, help and validation around the inputs.
In the admin: Design form › Widgets › Form
A record form is a Form full of form fields, one per column, each holding the input its column's presentation chooses.
Form
Groups fields, validates them together and emits submit.
UForm · Nuxt UI
Groups fields: checks the required ones and emits submit with { data } - the fields' values by name.
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Disabled | disabled | ƒ | Shown greyed out - it can't be used. |
| Busy while submitting | loadingAuto | default true | Its submit button shows loading while the submit handler runs. |
| Validate | validate | A Code function (dataview, { data }) returning { errors: { field, message } } - may be async. |
Slots
| Slot | Code | |
|---|---|---|
| Fields | default | edited in place |
Events
| Event | Code | Receives |
|---|---|---|
| Submit | submit | { data } - the fields' values by name, the body a Call takes as is |
| Errors | error | { errors: { field, message } } |
Methods
Called from Code as dataview.controls.<name>.<method>().
| Method | Code | |
|---|---|---|
| Submit | submit() | Validates its fields and emits Submit |
| Validate | validate() | Checks its fields and shows their errors |
| Clear | clear() | Clears its fields' errors |
Form field
A label, description, help and required mark around one input. Bound to a column, it reads the column's rules and presentation live.
UFormField · Nuxt UI
A labelled field around one input: label, help, required.
When placed: asks for its input and its Value
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Column | column | A column of the page's record: its input edits record.data. | |
| Full width | block | default true | Its input fills the field - set the field's width and the input follows. |
| Required | required | ƒ | Needs a value before the form submits - a NOT NULL column already does. |
| Pattern | pattern | A regular expression (JavaScript) the whole value must match - checked as the viewer types, with the column's own CHECK. PostgreSQL still decides on save; an empty value is left to Required. | |
| Pattern message | patternMessage | ƒ | Shown under the field when the value doesn't match. Empty: Invalid format. |
| Name | name | Its value's key in the form's data - by convention the column it saves to. Empty: its column, else the input's variable. | |
| Size | size | xs, sm, md, lg, xl | From xs to xl - Default is md. |
| Orientation | orientation | horizontal, vertical | Laid out in a row or in a column. |
| Label width | labelWidth | 1/4, 1/3, 2/5, 1/2 | Horizontal: the label takes this share of the field and the input the rest - set the same on fields beside each other and their values line up. A phone stacks it, label above. |
Also: Label label (ƒ), Description description (ƒ), Hint hint (ƒ), Help help (ƒ), Error error (ƒ).
Slots
| Slot | Code | |
|---|---|---|
| Input | default | holds one input, nothing else; edited in place |
Example
{
"widget": "UFormField",
"props": {
"column": "customer_signature",
"label": "Customer's signature"
},
"children": [
{
"widget": "TSignature",
"props": {
"height": 200
}
}
]
}