Components / Form / API / FieldInjectedProps / 
New to Kendo UI for Vue? Start a free 30-day trial

FieldInjectedProps

Represents the props that are passed from the Form component to the components nested inside it. To use the KendoFrom Injected Property it should be injected it in the component that defines the Form content using the below code.

  ...........
  inject: {
      kendoForm: { default: {} },  
  }
  ...........
NameTypeDefaultDescription

allowSubmit?

boolean

Indicates if the Form is ready to be submitted. If allowSubmit is set to true and the Form is valid, the user will be able to submit the form. If allowSubmit is set to true and the Form is not valid, the user will be able to set all fields touched and visited state to true. Useful for toggling the disabled state of the Submit button.

errors?

object

The key-value pair containing the current errors by field path, combined from both field and form level validators.

modified

boolean

Indicates if the Form is modified. If any field is modified, modified is set to true. The modified state of field is set to true when the onChange callback of the Field component is called for first time.

modifiedByField

object

An object that holds the modified fields.

onBlur

() => void

A callback you have to call when the rendered component is blurred. Responsible for setting the touched state of the Field.

onChange

(fieldName: string, event: { target?: any; value?: any; }) => void

A callback you have to call when the value of the rendered component is changed (see example). The value property of the event takes precedence over target.value.

onFocus

() => void

A callback you have to call when the rendered component is focused. Responsible for setting the visited state of the Field.

onFormReset

() => void

A callback for resetting the Form.

onInsert

(options: { index: number; value: any; }) => void

A callback to insert value at given index of the array.

onMove

(options: { nextIndex: number; prevIndex: number; }) => void

A callback to move a value from one index to another. Useful for drag and drop reordering.

onPop

() => any

A callback to remove a value from the end of the array. The value is returned.

onPush

(options: { value: any; }) => void

A callback to add a value to the end of the array.

onRemove

(options: { index: number; }) => any

A callback to remove a value from given index of the array.

onReplace

(options: { index: number; value: any; }) => void

A callback to replace value at given index of the array.

onSubmit

(event: any) => void

A callback for submitting the Form. Can be passed to the onClick property of the Submit button.

onUnshift

(options: { value: any; }) => number

A callback to add a value to the beginning of the array.

submitted

boolean

Indicates if the Form is successfully submitted. Useful for detecting if user is leaving the form before saving changes.

touched

boolean

Indicates if the Form is touched. If any field is touched, touched is set to true. The touched state of field is set to true when the onBlur callback of the Field component is called or when the user tries to submit the form.

touchedByField

object

An object that holds the touched fields.

valid

boolean

Indicates if the Form is valid. If any field is invalid, valid is set to false.

validate

(options?: {[key: string]: any}) => void

When called without parameters it validates all the fields in the Form. If called with object parameter with keys names - the names of the fields, only these fields are validated.

valueGetter

(name: string) => any

A callback for getting the value of a field without using the Field component (see example). Useful for creating and modifying the UI based on the field values.

visited

boolean

Indicates if the Form is visited. If any field is visited, visited is set to true. The visited state of field is set to true when the onFocus callback of the Field component is called or when the user tries to submit the form.

visitedByField

object

An object that holds the visited fields.

In this article

Not finding the help you need?

Contact Support