ElementUI 使用子组件进行验证

ElementUI doing validation with Sub Component

如何验证表单中的子组件?

在表单组件中我有子组件:

<template>
  <el-form :model="value">
    <el-form-item 
      prop="name" 
      :rules="{ required: true, message: 'Necessary', trigger: 'blur' }"
    >
      <el-input v-model="value.name">
    </el-form-item>
    <ZipCode v-model="value.zipcode" />
  </el-form>
</template>
<script>
export default {
  props: {
    value: { 
      type: Object, 
      default: () => { 
        return { 
          name: null, 
          zipcode: { code: null, local: null }
        } 
      }
    }
  }
}
</script>

并且在 ZipCode 组件中:

<template>
  <el-form-item 
    prop="code" 
    :rules="{ required: true, message: 'Necessary', trigger: 'blur' }"
  >
    <el-input v-model="value.code">
  </el-form-item>

  <el-form-item 
    prop="local" 
    :rules="{ required: true, message: 'Necessary', trigger: 'blur' }"
  >
    <el-input v-model="value.local">
  </el-form-item>
</template>
<script>
export default {
  props: {
    value: { 
      type: Object, 
      default: () => { return { code: null, local: null } } 
    }
  }
}
</script>

表单组件的验证按预期工作,但子组件的验证不正常。如果该字段有数据,仍然报数据为必填项的错误。这种错误验证也适用于表单组件。

所以问题可能出在“prop”字段上。如果将道具更改为“value.code”或“zipcode.code”,则会出现错误“错误:请将有效的道具路径传输到表单项”。

可能是什么问题?感谢您的帮助。

规则的类型应为 'object',每个子规则都有一个 属性 字段。

  <el-form :model="value" :rules="
    {
      name: [
        { required: true, message: 'Please input name', trigger: 'blur' }
      ],
      zipcode: {
        type: 'object',
        required: true,
        fields: {
          code: { type: 'string', required: true, len: 8, message: 'invalid zip' },
          local: { type: 'string', required: true, message: 'required' }
        }
      }
    }
  ">