Element UI自定义表单组件怎么加入验证功能

Question

自定义了一个表单组件，但是想用上验证功能不知道如何下手了，求大佬帮忙看看。
这是我定义的控件file-choose，然后用rules不生效

<el-form-item label="选择目录" prop="filePath">
  <file-choose v-model="form.filePath"></file-choose>
</el-form-item>

rules: {
  filePath: [
    {required: true, message: '不能为空'}
  ]
},

这是控件的效果图,现在就是想实现对输入框的内容进行校验

控件的代码

<template>
  <div>
    <el-button type="primary" class="file-choose-button" @click="visible=true">选择</el-button>
    <el-input class="file-choose-input" :value="value" @dblclick.native="visible = true"></el-input>
    <el-dialog title="目录浏览" :visible="visible" @close="visible = false">
      <el-tree :data="files"
               :props="props"
               :load="loadChild"
               :highlight-current="true"
               node-key="path"
               lazy
               ref="tree"
               class="file-choose-tree"></el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary"
                   @click="visible = false;$emit('input',$refs.tree.getCurrentNode().path)">确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Vue from 'vue'

  export default {
    data() {
      return {
        visible: false,
        files: [],
        props: {
          isLeaf: 'last'
        }
      }
    },
    props: ['value', 'model'],
    methods: {
      loadChild(node, resolve) {
        this.$http.post('api/getChildDirList',
          {
            path: node.data.path || '',
            model: this.model || 'dir',
          })
        .then((response) => {
          let result = response.data;
          if (result.status == 200) {
            if (result.data) {
              resolve(result.data);
            }
          } else {
            this.$message(result.msg);
          }
        });
      }
    }
  }
</script>

要怎么加上验证的功能呢？

Answer 1

解决了，研究了下ele-input的代码发现会自动找父节点elFormItem和elForm,所有并不需要特殊处理。
主要是自定义控件的v-model实现有问题，加上@input传递值给子控件就好了

<el-input class="file-choose-input" :value="value" @dblclick.native="visible = true" @input="$emit('input',arguments[0])></el-input>

Answer 2

,首先去看看elment-ui中input组件的源代码，然后再看我图中代码，你就懂了

Answer 3

说的太模糊了吧