Skip to main content

The BaseForm

The BaseForm.vue component renders a form based on fields via an endpoint. On the Adding fields to page page it is described how to create the back-end for this form. BaseForm.vue has a few useful props, events, methods and slots that can be used.

Props​

endpoint (string)​

The endpoint is used to retrieve the fields, and the form will be submitted to this url.

fieldsEndpoint (string)​

Is this prop is given, fields will be retrieved from this endpoint instead of the :endpoint prop.

method (string)​

The HTTP method (POST, PUT, PATCH, DELETE). Defaults to POST.

hideActions (bool)​

Whether actions (submit & reset) should be shown below the form. Defaults to false.

hideReset (bool)​

Hide the reset button. Defaults to false

notify (bool)​

Show a notification alert when the form retrieves a 200 when submitted. Defaults to true.

appendToRequest (object)​

Append own custom request data to the submit requests. Defaults to {}.

initialState (object)​

The (optional) initial state for fields. For example: :initial-state="{ name: 'Koen' }".

reloadOnSuccess (bool)​

Whether the form should be reloaded after it has been submitted successfully. Defaults to false.

onlyAppendOnSubmit (bool)​

Whether the appendToRequest should only be applied when submitting the form. Defaults to false.

resource (object)​

If there is a resource related to the form, this should be passed as an object. Defaults to null


<base-form
    method="PUT"
    hide-reset
    @ready="onReady"
    :notify="false"
    :appendToRequest="{ columns: localColumns }"
    :endpoint="`resources/${resource.name}/table-settings`"
    @success="onSuccess"
/>

sticky​

places the form submit, reset buttons inside a sticky bad at the bottom of the page

usePostForFieldsEndpoint (bool)​

Whether to use POST instead of GET when doing requests to the fields endpoint. Defaults to false. This could be useful when you have fields that send a lot of data (e.g. repeater), which at some point could exceed the maximum URL length when using GET. Resource create and update forms use true for this prop.

Events​

success (responseData)​

Emitted after the form has successfully been submitted

error (error)​

Emitted after the form has not successfully been submitted

busy (bool)​

Emitted when the form is busy or not busy

ready (formData)​

Emitted after the form is initialized (and the fields have been loaded).

fieldUpdated (name, value, args = )​

Emitted after a field value has updated. The args is usually empty, but can have additional state info (e.g. for repeater fields).

formDataUpdated (formData)​

Emitted when the formData is updated

Methods​

Methods require a reference to the form:


<base-form
    endpoint="profile"
    method="PUT"
    @success="onSuccess"
    ref="form" <-----
/>

submit ()​

Submits the form

this.$refs.form.submit()

reset (fields)​

Resets all the fields in a form or only the given fields.

this.$refs.form.reset()
this.$refs.form.reset(['old_password', 'checked_password', 'checked_password_confirmation'])

Slots​

prepend​

Prepend a template before the fields.

append​

Append a template after the fields, but before the actions