Properties and Options
Components created by Vue Formly have different properties and options that can be set. Below is a list and an explanation of them
Formly Form
<formly-form
:form="form"
:model="model"
:fields="fields">
</formly-form>
Property | Type | Default | Description |
---|---|---|---|
:fields | array |
null |
REQUIRED. An array which holds the schema for the fields. The actual value of each field is stored here also. This does not have to equal 'fields' and can be whatever variable you like |
:form | object |
null |
REQUIRED. An object which will hold the current state of the form. This will be populated by Vue Formly and should be left empty. |
:model | object |
null |
REQUIRED. An object which holds the model for your form. If you want to set default values this is where you would put it. |
tag | string |
fieldset |
By default, fields are wrapped in a fieldset element. You can change this by passing a tag name to the tag prop. |
:form
Not much is required in the :form object that is passed to Formly but there are some restricted fields and some requirements.
Attribute | Type | Default | Description |
---|---|---|---|
$errors | object |
null |
RESTRICTED. Vue Formly will set this for you. It holds any errors given from the validation of each field. |
$valid | boolean |
false |
RESTRICTED. Vue Formly will set this for you. It denotes whether or not the whole form is valid based on whether there are any errors in the form. |
:fields
The fields should be an array of objects. The details below are for each field object
Attribute | Type | Default | Description |
---|---|---|---|
key | string |
null |
REQUIRED. The key that relates to the model. This will link the field value to the model |
type | string |
null |
REQUIRED. This should be a formly-field type added either by you or a plugin. More information over at Creating Formly Fields. |
required | boolean |
false |
Determines whether this field is required or not. Defaults to false. |
display | function | true | display should be a function that takes two arguments, field and model. You can use this to conditionally display elements. If nothing is set it will default to true. It should return a boolean value. |
validators | object |
null |
Used to set validation rules for a particular field. Should be an object of key - value pairs. The value can either be an expression to evaluate or a function to run. Each should return a boolean value, returning true when the field is valid. See Validation for more information. |
templateOptions | object |
null |
More on this in the Vue Formly Bootstrap docs, but this is where template specific options should go. E.g. element ID, labels, etc. As this is really enforced by the input types you use, these options won't be covered here. It is possible to add more attributes here, and some may be required by your fields, but these are the bare bones requirements. For example, the Vue Formly Bootstrap plugin provides a whole lot of fields according to Bootstrap standards. Along with that it also adds a few attributes such as a label for each field. Feel free to add your own when you're creating field types. |