Field properties & methods

Common properties of field

Property Default Accepted values Description
type none String Type of field
label none String Label of field
model none String Name of property in the model
id auto-generated String 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.
featured false Boolean is it a featured (bold) field? It can be a function too.
visible true Boolean if false, field will be hidden. It can be a function too.
disabled false Boolean if true, field will be disabled. It can be a function too.
required false Boolean if true, must be fill this field (need to use validator).
multi false Boolean if true, it will visible only if multiple is true in component attributes
default none any Default value of the field (use when create a new model)
hint none String show this hint below the field
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
help none String show this help if mouse hover the question icon before the caption of field. You can use HTML elements too.
validator none Function or Array Validator for value. It can be an array of functions too.
styleClasses none String or Array custom css style classes. It will be appended to the .from-group
buttons none Array Array of button objects. This is useful if you need some helper function to fill the field. (E.g. generate password, get GPS location..etc)*

Common methods of field

Method Description
get: function(model) {...} A read formatter function where you can format the model value to the field
set: function(model, value) {...} A write formatter function where you can format the field value to the model

Common events of field

Name Attributes Description
onChanged (model, newVal, oldVal, field) Triggered if the value of field is changed.
onValidated (model, errors, field) Triggered if validation of field is executed.

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 [];
    }
}

results matching ""

    No results matching ""