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

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.