FormField #
Form field component is a utility component that helps you to manage form fields. It provides isValid, isDirty, errorMessages computed refs and validate method to validate form fields. You can also reset validation with resetValidation method or reset whole form field and its value with reset method.
Notice, that you need to use slot bind #default="{ value }" and v-model="modelValue.ref" otherwise isDirty will not be updated. Alternatively, you can set :dirty="true".
Examples #
Basic usage #
VaFormField accepts validation rules as prop. If you want to make your own custom component you can wrap it with VaFormField and pass rules prop to it. Component will perform validation and show error messages if needed.
Message #
You can show message instead of error message. Just pass message prop to VaFormField.
Using with VaForm #
VaFormYou can use VaFormField with VaForm component. VaForm will treat your custom component as form field.
API #
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| clearValue | Component value that will be used as new value when component is cleared |
| - |
| dirty | Sets the dirty state of the component |
|
|
| error | Show component in error state. |
| - |
| errorCount | Number of error messages displayed. |
|
|
| errorMessages | Error messages for the component. |
| - |
| immediateValidation | Sets the validation to be performed when the component is mounted |
|
|
| messages | Description messages for the component. |
|
|
| modelValue | The value of the |
| - |
| name | Applies |
| - |
| rules | Validation rules . |
|
|
| stateful | Add possibility to work with component without setting |
|
|
| success | Show component in success state. |
|
|
Events #
| Name | Description |
|---|---|
update:dirty | Fires when the dirty state changes |
update:error | Fires when the error state changes |
update:errorMessages | Fires when the error messages change |
update:modelValue | The event is triggered when the component needs to change the model. Is also used by |