Nested form - vue

Question

I have a nested json schema with unknown number of fields. i am using dynamic components to render the input elements.

My question is how do i approach for this kind of challenge to validate my form because i am using v-for to to loop over json schema also there is indefinite number of fields. I am using vuelidate to validate my dynamic form.

Any thoughts of how I can achieve this ?

Below is the json

    [{
        "title": "Profile Information",
        "fields": [{
            "name": "profile",
            "fields": [{
              "component": "BaseInput",
              "model": "firstName",
              "label": "firstName",
              "name": "firstName",
              "validations": {
                "required": {
                  "params": null,
                  "message": "This field is required"
                },
                "minLength": {
                  "params": 3,
                  "message": "Please type at least 3 characters"
                }
              }
            }]
          },
          {
            "title": "Contact Info",
            "name": "contact",
            "fields": [{
                "component": "BaseInput",
                "model": "email",
                "name": "email",
                "label": "email",
                "validations": {
                  "required": {
                    "params": null,
                    "message": "This field is required"
                  },
                  "minLength": {
                    "params": 3,
                    "message": "Please type at least 3 characters"
                  }
                }
              },
              {
                "component": "BaseInput",
                "model": "phone",
                "name": "phone",
                "label": "phone",
                "validations": {
                  "required": {
                    "params": null,
                    "message": "This field is required"
                  },
                  "minLength": {
                    "params": 3,
                    "message": "Please type at least 3 characters"
                  }
                }
              },
              {
                "name": "links",
                "title": "Social Information",
                "fields": [{
                    "component": "BaseInput",
                    "model": "website",
                    "name": "website",
                    "label": "website",
                    "validations": {
                      "required": {
                        "params": null,
                        "message": "This field is required"
                      },
                      "minLength": {
                        "params": 3,
                        "message": "Please type at least 3 characters"
                      }
                    }
                  },
                  {
                    "component": "BaseInput",
                    "model": "linkedin",
                    "name": "linkedin",
                    "label": "linkedin",
                    "validations": {
                      "required": {
                        "params": null,
                        "message": "This field is required"
                      },
                      "minLength": {
                        "params": 3,
                        "message": "Please type at least 3 characters"
                      }
                    }
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "title": "Address Information",
        "name": "address",
        "fields": [{
          "component": "BaseInput",
          "model": "address",
          "name": "address",
          "label": "address",
          "validations": {
            "required": {
              "params": null,
              "message": "This field is required"
            },
            "minLength": {
              "params": 3,
              "message": "Please type at least 3 characters"
            }
          }
        }]
      },
      {
        "title": "Work Information",
        "name": "work",
        "fields": [{
          "component": "BaseInput",
          "model": "work",
          "name": "work",
          "label": "work",
          "validations": {
            "required": {
              "params": null,
              "message": "This field is required"
            },
            "minLength": {
              "params": 3,
              "message": "Please type at least 3 characters"
            }
          }
        }]
      }
    ]

Answer 1

With vuelidate it is not possible for now, but there is request merged into next branch that support reactiveness check

const form = reactive({
  foo: '',
  bar: ''
});

const validationArgs = {
  form: {
    foo: {
      required,
      $autoDirty
    },
    bar: {
      required,
      $autoDirty
    },
    required
};

const validation = useVuelidate(validationArgs, { form });

You can take that branch and parse json prepare it for validation and put it into useVuelidate method.

Also great opportunity to contribute to github project if you find bugs or refine.

Answer 2

Yes, you can. By using the component's name trick, by providing a name for the component and using that tag inside of it. It will be acting like a recursive.

Take a look at this example.