ElementUI使用子组件进行验证

Question

如何在表单中验证子组件？

在表单组件中，我有一个子组件：

<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”，则会出现错误" error : the a valid prop path to form item“。

可能的问题是什么？谢谢你的帮助。

Answer 1

规则的类型应该是一个'object‘，每个子规则都有一个field属性。

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