-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: form and fields values setters (#2949)
- Loading branch information
Showing
7 changed files
with
198 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -372,14 +372,109 @@ You can use `validateOnMount` prop present on the `<Form />` component to force | |
|
|
||
| The `initialValues` prop on both the `<Form />` component and `useForm()` function can reactive value, meaning you can change the initial values after your component was created/mounted which is very useful if you are populating form fields from external API. | ||
|
|
||
| Note that **only the pristine fields will be updated**. In other words, **only the fields that were not manipulated by the user will be updated**. | ||
| Note that **only the pristine fields will be updated**. In other words, **only the fields that were not manipulated by the user will be updated**. For information on how to set the values for all fields regardless of their dirty status check the following [Setting Form Values section](#setting-form-values) | ||
|
|
||
| <doc-tip title="Composition API"> | ||
|
|
||
| If you are using the composition API with `setup` function, you could create the `initialValues` prop using both [**reactive()**](https://v3.vuejs.org/api/basic-reactivity.html#reactive) and [**ref()**](https://v3.vuejs.org/api/refs-api.html#ref). vee-validate handles both cases. | ||
|
|
||
| </doc-tip> | ||
|
|
||
| ## Setting Form Values | ||
|
|
||
| You can set any field's value using either `setFieldValue` or `setValues`, both methods are exposed on the `<Form />` component scoped slot props, and in `useForm` return value, and as instance methods if so you can call them with template `$refs` and for an added convenience you can call them in the submit handler callback. | ||
|
|
||
| **Using scoped slot props** | ||
|
|
||
| ```vue | ||
| <Form v-slot="{ setFieldValue, setValues }"> | ||
| <Field name="email" as="input"> | ||
| <ErrorMessage name="email" /> | ||
| <Field name="password" as="input"> | ||
| <ErrorMessage name="password" /> | ||
| <button type="button" @click="setFieldValue('email', 'test')">Set Field Value</button> | ||
| <button type="button" @click="setValues({ email: 'test', password: 'test12' })"> | ||
| Set Multiple Values | ||
| </button> | ||
| </Form> | ||
| ``` | ||
|
|
||
| **Using submit callback** | ||
|
|
||
| ```vue | ||
| <template> | ||
| <Form @submit="onSubmit"> | ||
| <Field name="email" as="input"> | ||
| <ErrorMessage name="email" /> | ||
| <Field name="password" as="input"> | ||
| <ErrorMessage name="password" /> | ||
| <button>Submit</button> | ||
| </Form> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| // ... | ||
| methods :{ | ||
| onSubmit(values, { form }) { | ||
| // Submit the values... | ||
| // set single field value | ||
| form.setFieldValue('email', '[email protected]'); | ||
| // set multiple values | ||
| form.setValues({ | ||
| email: '[email protected]', | ||
| password: 'P@$$w0Rd', | ||
| }); | ||
| } | ||
| } | ||
| }; | ||
| </script> | ||
| ``` | ||
|
|
||
| **Using template `$refs`** | ||
|
|
||
| ```vue | ||
| <template> | ||
| <Form @submit="onSubmit" ref="myForm"> | ||
| <Field name="email" as="input"> | ||
| <ErrorMessage name="email" /> | ||
| <Field name="password" as="input"> | ||
| <ErrorMessage name="password" /> | ||
| <button>Submit</button> | ||
| </Form> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| // ... | ||
| methods :{ | ||
| onSubmit(values) { | ||
| // Submit the values... | ||
| // set single field value | ||
| this.$refs.myForm.setFieldValue('email', '[email protected]'); | ||
| // set multiple values | ||
| this.$refs.myForm.setValues({ | ||
| email: '[email protected]', | ||
| password: 'P@$$w0Rd', | ||
| }); | ||
| } | ||
| } | ||
| }; | ||
| </script> | ||
| ``` | ||
|
|
||
| Note that setting any field's value using this way will trigger validation | ||
|
|
||
| ## Setting Errors Manually | ||
|
|
||
| Quite often you will find yourself unable to replicate some validation rules on the client-side due to natural limitations. For example a `unique` email validation is complex to implement on the client-side, which is why the `<Form />` component and `useForm()` function allow you to set errors manually. | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -1216,4 +1216,43 @@ describe('<Form />', () => { | |
| await flushPromises(); | ||
| expect(error.textContent).toBe('WRONG'); | ||
| }); | ||
|
|
||
| test('sets individual field value with setFieldValue()', async () => { | ||
| const wrapper = mountWithHoc({ | ||
| template: ` | ||
| <VForm ref="form"> | ||
| <Field id="email" name="email" as="input" /> | ||
| </VForm> | ||
| `, | ||
| }); | ||
|
|
||
| await flushPromises(); | ||
| const value = '[email protected]'; | ||
| const email = wrapper.$el.querySelector('#email'); | ||
| (wrapper.$refs as any)?.form.setFieldValue('email', value); | ||
| await flushPromises(); | ||
| expect(email.value).toBe(value); | ||
| }); | ||
|
|
||
| test('sets multiple fields values with setValues()', async () => { | ||
| const wrapper = mountWithHoc({ | ||
| template: ` | ||
| <VForm ref="form"> | ||
| <Field id="email" name="email" as="input" /> | ||
| <Field id="password" name="password" as="input" /> | ||
| </VForm> | ||
| `, | ||
| }); | ||
|
|
||
| await flushPromises(); | ||
| const values = { | ||
| email: '[email protected]', | ||
| password: '12345', | ||
| }; | ||
| const inputs = wrapper.$el.querySelectorAll('input'); | ||
| (wrapper.$refs as any)?.form.setValues(values); | ||
| await flushPromises(); | ||
| expect(inputs[0].value).toBe(values.email); | ||
| expect(inputs[1].value).toBe(values.password); | ||
| }); | ||
| }); | ||