Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

defineField config not reactive for conditionally required property #4848

Open
2 of 5 tasks
KammererTob opened this issue Aug 26, 2024 · 1 comment
Open
2 of 5 tasks
Labels
✨ enhancement a "nice to have" feature

Comments

@KammererTob
Copy link

What happened?

I am using VeeValidate & yup with the Quasar framework. It seems like the attributes returned by a custom config method passed to defineField are not reactive to changed field requirements.
For example when using yups when you can make a field required only if another field is filled.

In the Demo provided below i tried to show this by using a custom class, which adds a red "star" to indicate when a field is required.
Only "email" is required by default and if it is provided "fullName" becomes required as well.
I would have expected that the attributes are updated according to dynamic schema changes. Especially since the config method is called for "fullName" when "email" is updated.

Here is a small snippet for immediate reference:

const schema = toTypedSchema(
  yup.object({
    email: yup.string().required().default(null),
    fullName: yup.string().when(['email'], (refFields, schema) => {
      if (!!refFields[0]) {
        return schema.required();
      }
      return schema.nullable();
    }),
  })
);

const { defineField, handleSubmit, resetForm, errors } = useForm({
  validationSchema: schema,
});

const quasarConfig = (state) => {
  return {
    props: {
      error: !!state.errors[0],
      'error-message': state.errors[0],
      class: { 'input-required': state.required },
    },
  };
};

const [fullName, fullNameProps] = defineField('fullName', quasarConfig);
const [email, emailProps] = defineField('email', quasarConfig);

On a side-note: It seems if you remove toTypedSchema, it breaks completely and both fields are shown as not required. Not sure if this is a separate issue, but i would have assumed that the behavior should be the same.

Reproduction steps

No response

Version

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

What browsers are you seeing the problem on?

  • Firefox
  • Chrome
  • Safari
  • Microsoft Edge

Relevant log output

No response

Demo link

https://stackblitz.com/edit/vee-validate-v4-quasar-framework-8qdp7l?file=src%2FApp.vue

Code of Conduct

@logaretm
Copy link
Owner

There is a limitation on how well detecting required works because we analyze the schema initially and on subsequent changes but not during validations which will affect this.

I think it is doable but no ETA on this, would be great if someone wants to PR this.

@logaretm logaretm added the ✨ enhancement a "nice to have" feature label Oct 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✨ enhancement a "nice to have" feature
Projects
None yet
Development

No branches or pull requests

3 participants
@KammererTob @logaretm and others