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.

results matching ""

    No results matching ""