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"
            }
          }
        }]
      }
    ]

Andy Nguyen · Accepted Answer · 2020-08-26 16:52:29Z

3

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.

edited Aug 26, 2020 at 16:52

answered Aug 26, 2020 at 16:43

Andy Nguyen

1,0431 gold badge10 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

power-cut Over a year ago

from your example i understand that you are trying on the recursive approach. Can you do in it while in input field context ?

Andy Nguyen Over a year ago

You need to wrap it with another component to do recursive I think you could do it with all kind of components that you register. The most important part is in the LoopNode.

Arman · Accepted Answer · 2020-08-31 15:15:43Z

0

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.

answered Aug 31, 2020 at 15:15

Arman

4894 silver badges12 bronze badges

Collectives™ on Stack Overflow

Nested form - vue

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related