Element: [Bug Report] Error: please transfer a valid prop path to form item!"

[bubnenkoff]

Element UI version

2.4.7

OS/Browsers version

Windows 10 Chrome

Vue version

2.5.17

Reproduction Link

https://jsfiddle.net/st56h3ky/

Steps to reproduce

I need to need to validate nested form data in Vue Element. The example ( https://element.eleme.io/#/en-US/component/form#delete-or-add-form-items-dynamically ) is pretty same with my code. The only difference that dynamicValidateForm is wrapped in MainForm

What is Expected?

Expected working nested form with validation

What is actually happening?

I am getting error Error: please transfer a valid prop path to form item!"

[wacky6]

Validation can not work with array index.

[bubnenkoff]

It's seems that this variant is working:

 :prop="'dynamicValidateForm' +  '.domains.' + index + '.value'"
 :rules="rules.value"

Full code:

      <el-form :model="MainForm" ref="MainForm" label-width="120px" class="demo-dynamic">

          <el-form-item
            v-for="(domain, index) in MainForm.dynamicValidateForm.domains"
            :label="'Domain' + index"
            :key="domain.key"
            :prop="'dynamicValidateForm' +  '.domains.' + index + '.value'"
            :rules="rules.value"
          >
            <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>
          </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="submitForm('MainForm')">Submit</el-button>
          <el-button @click="addDomain">New domain</el-button>
          <el-button @click="resetForm('MainForm')">Reset</el-button>
        </el-form-item>

      </el-form>

https://jsfiddle.net/1koemaw6/

[ziyoung]

:prop="'dynamicValidateForm.domains.' + index + '.value'"

[ziyoung]

Duplicate of #11112