{ type:"input", inputType:"text", label:"Name", model:"name", id:"full_name", readonly:false, featured:true, disabled:false, required:true,default: "Anonymous", hint:"Please enter your full name", help:"This is an other longer help text", validator:validators.string, onChanged:function(model, newVal, oldVal, field) {console.log(`Model's name changed from ${oldVal} to ${newVal}. Model:`, model); }, onValidated:function(model, errors, field) {if (errors.length>0)console.warn("Validation error in Name field! Errors:", errors); }}
Dynamic visibility
With the visible, disabled, readonly and featured properties, you can also show or disable fields dynamically.
Those properties can take a Function with a model parameters and expect a Boolean in return.
{ type:"select", label:"Type", model:"type", values: [ { id:"personal", name:"Personal" }, { id:"business", name:"Business" } ]},{ type:"text", label:"Company name", model:"company.name",visible:function(model) {//visible if business is selectedreturn model &&model.type =="business"; }}
Generated values
For fields select, checklist, selectEx or vueMultiSelect, the values property can be a Function. In this case, you can dynamically generate the items.
{ type:"select", label:"Item", model:"item",// values gets model and schema as parameters values:function(model, schema) {switch(model.category) {case"Fruit": return ["Apple","Peach","Orange"];case"Vehicle": return ["Car","Bicycle","Ship"];case"Animals": return ["Lion","Dog","Cat"]; }return []; }}
Custom Attributes
You can add custom HTML Attributes, such as data-attributes, to fields by using an attributes object.
You can also specify the attributes of the surrounding wrapper and label:
The attributes object is broken up into "wrapper", "input" and "label" objects which will attach attributes to the respective HTML element in the component. All VFG Core fields support these, where applicable.
If you do not specify where the attributes go, and just provide a flat "attributes" property, then the attributes will be assigned to the "input" element on the component by default.
id of the field. If not set, will be auto-generated from the slugified version of either: schema.inputName, schema.label or schema.model, in that order. If the fieldIdPrefix option is set, it's value will be prepended to both manual & auto-generated ids.
inputName
none
String
set name attribute to input field. You can use it to generate normal HTML Forms and submit the field values to server-side. Example
featured
false
Boolean
is it a featured (bold) field? Can be a function too.
visible
true
Boolean
if false, field will be hidden. Can be a function too.
disabled
false
Boolean
if true, field will be disabled. Can be a function too.
required
false
Boolean
If true, Stylizes the field as required. Works in conjunction with validators.
multi
false
Boolean
if true, it will be visible only if multiple is true in component attributes
default
none
any
Default value of the field (used when creating a new model)
hint
none
String
Show this hint below the field
help
none
String
Tooltip/Popover triggered by hovering over the question icon before the caption of field. You can use HTML elements too.