Field Properties

Common properties of field

Common methods of field

Common events of field

Example

{
    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 selected
    return 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.

{
  type: "input",
  inputType: "text",
  model: "first_name",
  label: "First Name",
  attributes: {
    wrapper: { "data-toggle": "collapse" },
    input: { "data-toggle": "tooltip", "title": "Some Tooltip to be displayed by Bootstrap Tooltips" },
    label: { "custom-attr": "custom-value" }
  }
}

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.

{
  type: "input",
  inputType: "text",
  model: "first_name",
  label: "First Name",
  attributes: {
    "data-toggle": "collapse",
    "title": "Some Tooltip Title"
  }
}

Last updated