ElementUI doing validation with Sub Component

Question

How to validate a sub component inside a form?

In the form component I have the 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>

And in the ZipCode component:

<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>

The validation on the form component is working as expected but not the validation on the sub component. If the field has data, still gives the error that data is required. This false validation is also working from the form component.

So problem might be on the "prop" field. If change the prop to "value.code" or "zipcode.code" it gives the error "Error: please transfer a valid prop path to form item".

What might be the issue? Thank you for any help.

Try fixing the typos on the <el-form-item>, they are ending with ) instead of >. If that doesn't fix it, you should post the validation code — Dan
– Dan, Commented Feb 5, 2021 at 17:23
@Dan Thank you, that was just a typo. The validation is done automatically by ElementUI following the :rules property. — InfoStatus
– InfoStatus, Commented Feb 5, 2021 at 18:40
The </el-form> is also not closed properly. Most importantly, it would be good to see your value object from the parent script — Dan
– Dan, Commented Feb 5, 2021 at 19:23
Still not enough code. You're using props for the form model and we can't see what the object's full structure is because it's a prop (not to mention it's being mutated, which is a no-no) — Dan
– Dan, Commented Feb 6, 2021 at 2:43

InfoStatus · Accepted Answer · 2021-02-06 15:59:19Z

1

The rule should have the type as an 'object' with a fields property for each sub rule.

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

answered Feb 6, 2021 at 15:59

InfoStatus

7,1139 gold badges45 silver badges55 bronze badges

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

Collectives™ on Stack Overflow

ElementUI doing validation with Sub Component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related