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.

results matching ""

    No results matching ""