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"
:custom-layout="true">
</formly-form>
Property | Type | Default | Description |
---|---|---|---|
:form | object |
null |
REQUIRED. An object in the Vue data that holds the schema for the form. The actual value of each field is stored here also. This does not have to equal 'form' and can be whatever you like. If you had a login form and a search form on a page you would have one :form="search" and :form="login" or whatever you have called them on your Vue instance. |
:custom-layout | boolean |
false |
This field is optional and determines whether the Formly Form should create the actual components for you based on the schema. If set to true, you must manually create the layout. More details in the Advanced Form Layouts section. |
: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. |
The form should be an object with each key being the field name. The details below are for each key.
Attribute | Type | Default | Description |
---|---|---|---|
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. |
value | mixed |
null |
While you do not need to explicity declare this attribute as Vue Formly will set it for you, you can set a default for the field by declaring this. |
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. |
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.
Formly Field
Most of the time you won't need to use the <formly-field>
component as Vue Formly will generate the layout for you. But if you want to get into Advanced Layouts then you will need to know what properties are available to you.
<formly-field
:form.sync="form"
:key="someKey">
</formly-field>
Property | Type | Default | Description |
---|---|---|---|
:form.sync | object |
null |
This should be the same form object passed to the formly-form. |
:key | string |
null |
This tells the formly field what field schema to use and what field it relates to. It should be a key from the form :form object. |