Does allow creating controlled forms?

[jdinartejesus]

What happened?

We need to create form where some values need to be watch and change other inputs base on this. We have a component called Form with base on Element Plus, and we need this support for preventing breaking things.

Eg:

<script setup>
 const form = reactive({
   foo: null
   bar: null
})

  watch(() => form.foo, (newVal) => (form.bar = newVal + some-mutation))
</script>

<template>
   <Form initial-values="form" >
      <FormItem>
          <Input v-model="form.foo" />
     </FormItem>

      <FormItem>
          <Input v-model="form.bar" />
     </FormItem>
   </Form>
</template>

Reproduction steps

N/A

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• [X] Firefox
• [X] Chrome
• [X] Safari
• [X] Microsoft Edge

Relevant log output

No response

Demo link

codesandbox/codepen

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[jdinartejesus]

I know there's the { useFieldModel } but I wonder if there's a other way to use this? Since currently, I would need to add a ref to my component wrapper using useForm, and then try to reach the values.

[logaretm]

Not sure what is needed here but you can do this without useFieldModel at all. You should first consider implementing the form component with useForm instead of the Form component. Given you already use script setup, that shouldn't be a problem.

So something along those lines:

const { values, setFieldValue } = useForm({
  // options and stuff...
})

watch(() => values.foo, (newVal) => {
 setFieldValue('bar', newVal + some-mutation);
})

That should be enough to get your use case working unless there are some other complexities.

[jdinartejesus]

Sorry for the late reply @logaretm. Thanks, this also helps. There's any way to get useFieldModel from all the fields in the form?

Here's why, my initialValues as object coming directly from the server, and autopopulate the Field values but when submits should only bring the Fields I declared.

Eg:
InitialValues = { 
id: "1", name: "Recruiting Candidates",
 group_name: "Germany", 
created_at: "28/08/2022", 
updated_at: "30/08/2022"
}
...

<Form @submit="onSubmitForm">
   <Field name="name>
   <Field name="group_name" />
</Form>

....

function onSubmitForm (values) {
}

values on onSubmitForm should contain only { name, group_name }, and created_at or updated_at is ignored since shouldn't be updated by the frontend side. Of course, I could use something like pick or omit from Lodash, but since this is everywhere I wanted to add to my Form logic.

[logaretm]

Thanks for the call and for the elaboration. I now understand that you want only to include "controlled" field values without any extra fields that may leak in from initial values or otherwise.

I think this makes sense to have in vee-validate and will be working on it soon.

[jdinartejesus]

Thanks for the call @logaretm was easier to clarify, maybe I should have mentioned before on the ticket the use case of GraphQL.

[jdinartejesus]

@logaretm did you manage to do some progress here? Cheers!

[logaretm]

@jdinartejesus Didn't get around to doing it, unfortunately. I will see what I can do this week.

[jdinartejesus]

Thanks, @logaretm, I'm happy to become also sponsor from the next release since it's something we really need to move forward.

[logaretm]

@jdinartejesus That would be awesome, I appreciate it. I have published a WIP release in [email protected] with the work done so far which is boiled down in the draft PR here.

I might be doing some modifications depending on your feedback or new ideas that I might have. But I have largely moved away from introducing a configuration for this as it prevents people from having it both ways. Let me know what you think and if the proposed API works for your needs.

[jdinartejesus]

@logaretm works perfectly, that's exactly what I'm looking for to edit and submit forms with GraphQL!.

When are you planning to merge?

[logaretm]

Not sure yet, I was reserving it for 4.7 so around next week perhaps.

[jdinartejesus]

Sounds good @logaretm, I'll probably have the testing package running on production until then since I really need this live.