Is possible to change Yup validation schema on runtime?

[jankrnavek]

Hi, I am using dynamically generated Yup validation schema because of various number of input fields.

In the form I am deleting some of these fields and I need to refect this in my form instance useForm().

How can I do this? Is possible to recreate the form instance without the destruction of my component.

Thank you.
Hanz

Vue 3 with composition API, useForm()

[Brunnn]

You can just pass a reactive/computed variable as your validation:

const validation = computed(()=> {
 //return your dynamic validation object based on some condition...
})

const {} = useForm({
 validations: validation
})

[jankrnavek]

That is what I thought first, but there is a problem with a form error in some field and a schema change at the same time.

I have a problem with the field that I removed from the schema.
This field stays stuck with an error because of its value of "undefined" and I am not able to reset the form or set no-error on the field.
I do it like

resetForm({values: generateFormDefauls.value})

# deleted field  is stucked in the form
errors:Array[0]
initialValue:"Search 6"
currentValue:undefined
touched:false
dirty:true
valid:false

const generateFormDefauls = computed(() => {
...
}

const generateFormDefauls= computed(() => {
...
}

const {
	meta,
	errors,
	values,
	handleSubmit,
	handleReset,
	resetForm,
	setFieldValue,
	setFieldError,
	isSubmitting,
} = useForm({
	validationSchema: generateFormSchema.value,
	validateOnMount: false,
	initialValues: generateFormDefauls.value,
})

[jankrnavek]

Its weird but I have to pass computed properties without .value part into useForm()
Now everything works like a sharm.

So correct code is:

const generateFormDefauls = computed(() => {
...
}

const generateFormDefauls= computed(() => {
...
}

const {
	meta,
	errors,
	values,
	handleSubmit,
	handleReset,
	resetForm,
	setFieldValue,
	setFieldError,
	isSubmitting,
} = useForm({
	validationSchema: generateFormSchema,
	validateOnMount: false,
	initialValues: generateFormDefauls,
})