[Vuejs]-Dynamic form validation Element-ui

by

0👍

This is the solution

<div v-for="(option, index) in second.tabs" :key="index">
    <el-form-item :prop="'tabs.' + index + '.title'"
            :rules="{required: true, message: 'This is required.', trigger: 'blur'}">
        <el-input v-model="option.title"></el-input>
    </el-form-item>

    <div v-for="(square, ind) in option.squares" :key="square.key">
        <el-form-item :key="square.key" :prop="'tabs.' + index +'.squares.' + ind + '.title'" 
            :rules="{required: true, message: 'This is required.', trigger: 'blur'}">
            <el-input v-model="square.title"></el-input>
        </el-form-item>
        <el-form-item :key="square.key" :prop="'tabs.' + index +'.squares.' + ind + '.icon'" 
            :rules="{required: true, message: 'This is required.', trigger: 'blur'}">
            <el-input v-model="square.icon"></el-input>
        </el-form-item>
    </div>                                
</div>

The first prop was correct but I guess it wasn’t working cause of the cache, I erased it and typed it out and then it worked.

0👍

This is for posterity in case someone can’t undestand what the answer was.

You need to check the entire tree of the form, the entire path from the root of the form to the field you need to validate.

for example:

"addresses": [
    {
      "name": "",
      "city": "",
      "address": "",
      "phone": "",
      "hasExtendedQuestions": true,
      "extendedQuestions": [
        {
          "name": "",
          "type": "text"
        }
      ]
    }
  ]

There are two arrays, addresses is an array itself and is has extendedQuestions, if we try to validate the dynamic fields for the latest we type:

:prop="`addresses[${addresses_curr_idx}].extendedQuestions[${ext_questions_curr_idx}].type`"

Leave a comment