How to validate dynamic input?

[9mm]

edit I solved the original problem below but there is another poblem i added in another reply, perhaps a bug?

I have a "dynamic form" where an arbitrary number of fields can be specified. This is posing a problem and I'm not quite sure how to get around it.

the "schema" model comes from the API (to tell the form what fields are to be added to the form/validated). It looks like this:

GET /schema/:id

{
  schema: {
    fields: {
      field_1: { id: 'field_1', data_type: 'TEXT', required: true, name: 'Test Field', }
    }
  }
}

Then we have the actual object which has a static portion (like a title), and the dynamic field portion. It looks like this (this is the actual object the user is editing)

{
  title: "This is a title",
  date: 'some date',
  fields: {
    field_1: "Im a value for the field_1 TEXT field"
  }
}

My schema looks like this:

validationSchema: object({
  name: string().required().label('Name'),
  date: string().required().label('Date'),
  fields: object().shape({
    field_1: string().required().label('Test field...'),
  }),
}),

My "dynamic form" area looks like this:

        <template v-for="schemaField in schemaFields" :key="schemaField.id">
          <base-input
            v-if="schemaField.data_type === 'TEXT'"
            :model-value="fields[schemaField.id]"
            @update:modelValue="onUpdateField(schemaField.id, $event)"
            validation-key="fields[schemaField.id]"
            :label="schemaField.name"
          />
        </template>

The problem though is... I can't get it to actually validate.

I think the issue is that if I pass validation-key (this is what gets sent into useInput) which consists of field.someFieldId its not reading it properly from the schema.

If I try to pass simply fields then it actually SEES the validation but it says "undefined must be object" as if its looking at the outer fields and comparing it to the input modelValue which is a string.

I have to make the model-value the actual value though (rather than the field), so I'm not sure how I can get both worlds

[9mm]

Ugh...... this entire thing is because I didn't notice I had validation-key="" and not

:validation-key="`fields.${schemaField.id}"

[9mm]

Ok there is only one remaining issue that I'm not too sure about. Originally I thought it was a Yup issue not enforcing the shape({}) but now that I see it might be veeValidate issue.

The problem is vee says a form is valid when a nested field key is not present in the object. It DOES validate properly if the value is pre-filled in, or '', but not if its entirely missing.

For example when a new object is created it looks like this:

{
  title: "This is a title",
  date: 'some date',
  fields: {}
}

Notice that fields is an empty object.

This is problematic because veeValidate sees this as valid. For some reason I have to click into the input (which calls vee method this.validate(event);), and then it's seen as invalid.

This behavior click isn't required however when working with "normal" fields that are not nested, it immediately knows they're invalid.

[9mm]

More specifically it seems the input is showing valid: true

Note that the other field shows valid: false correctly. Yet both are missing keys in the object:

 { "fields": {} }

[alexela8882]

Hi. I am currently facing the same problem. Can you please check it?

https://stackoverflow.com/questions/77864680/vee-validate-and-yup-with-dynamic-input-fields-not-validating-and-showing-errors

[9mm]

I think this occurs when a schema dynamically changes and it's also nested. If I don't change the schema reactively (via API) then it seems to work.

I can console.log the schemaFields computed properly and see that it's properly reactive to outside changes, as is validationSchema. Maybe theres a bug with veeValidate not reacting to nested fields and only first level fields?

  setup(props, { emit }) {
    // originally property is {} empty, and comes in later as a prop when API resolves
    const schemaFields = computed(() => (
      Object.entries(props.property.schema.fields).map(([key, value]) => ({
        id: key,
        ...value,
      }))
    ));

    const buildValidations = computed(() => {
      const yupObject = schemaFields.value.reduce((acc, field) => {
        // build validations like .string().required.label()
        // ...
        acc[field.id] = validation;
        return acc;
      }, {});

      return object(yupObject);
    });

    // reactive schema
    const validationSchema = computed(() => (
      object({
        name: string().required().label('Name'),
        date: string().url().required().label('Date'),
        fields: buildValidations.value,
      })
    ));

    // we specifically don't pass the .value so veeValidate knows to update
    // the schema reactively
    const { handleSubmit, meta } = useForm({
      validationSchema,
    });

[eMeRiKa13]

Thanks for this code. It's helpful.

How do you create the fields?

I'm struggling to dynamically create fields using useField with different value for the alias name

const { value: ???? } = useField('links['+index+'].title');

[joeczucha]

@eMeRiKa13 This is exactly what I've been stuck on for the last couple of days. Did you find a solution?

[eMeRiKa13]

@joeczucha I made it work by using

const { remove: removeFromForm, push: pushInForm, replace: replaceFields, update: updateField, fields: fieldsLinks } = useFieldArray('links');

for the validation

const validationSchema = yupObject({
  links:  yupArray().of(yupObject({
   title: yupString().required('Your link must have a title.').max(50, 'Your link title must be maximum 50 characters.'),
  }))
});

and then in my template

<Field :name="`links[${index}].title`" v-slot="{ value, field }" > 
  <DashboardBaseInput
    v-bind="field" 
    :model-value="value"
    label="Title"
    type="text"
    :max="50"
    :error="errors[`links[${index}].title`]"
    @input="content.links[index].title = $event.target.value"
  />
</Field>