Open leleccccc opened 6 months ago
@form-create/ant-design-vue@3.1.28
4.0.6
自定义组件的表单验证,清空自定义组件的值,需要点击提交才能显示必填提示
index.vue
<template> <form-create :rule="rule" v-model:api="fApi" :option="options" /> </template> <script lang="ts" setup> import { onMounted, ref } from 'vue' import TestComponent from '@/components/TestComponent.vue' import { Rule } from '@form-create/ant-design-vue' const fApi = ref({}) const options = { onSubmit: (formData) => { alert(JSON.stringify(formData)) }, resetBtn: false } const rule: Rule[] = [ { type: 'hidden', field: 'id', value: '11' }, { type: 'radio', title: '是否包邮', field: 'is_postage', value: '0', options: [ { value: '0', label: '不包邮', disabled: false }, { value: '1', label: '包邮', disabled: false } ], on: { change: () => { // alert(`change!!"${fApi.value.getValue('is_postage')}"`) if (fApi.value.getValue('is_postage') === '1') { fApi.value.hidden(true, 'goods_name') } else { fApi.value.hidden(false, 'goods_name') } } } }, { type: 'input', field: 'goods_name', title: '商品名称', value: 'form-create', // effect: { // required: true // } validate: [{ required: true, type: 'string', message: '请输入' }] }, { type: 'checkbox', field: 'label', title: '标签', value: [0, 1, 2, 3], options: [ { label: '好用', value: 0 }, { label: '快速', value: 1 }, { label: '高效', value: 2 }, { label: '全能', value: 3 } ] }, { type: 'test', title: '自定义表单组件', field: 'test', value: 'some message', component: TestComponent, props: { value: 'some message' }, validate: [{ required: true, type: 'string', message: '请输入' }] } ] onMounted(() => { console.log('fApi.value: ', fApi.value) }) </script>
TestComponent.vue
<template> <div> <input type="text" v-model="text" @input="handleInput" > </div> </template> <script lang="ts" setup> import { ref, watch } from 'vue' const props = defineProps<{ value: string; }>() const emit = defineEmits<{ (e: 'update:modelValue', v: string): void }>() const text = ref('') const handleInput = (e) => { emit('update:modelValue', e.target.value) } watch(() => props.value, () => { text.value = props.value }, { immediate: true }) </script> <style lang="scss"> </style>
[{ required: true, type: 'string', message: '请输入', trigger:'change'}]
可以通过trigger设置验证触发方式
, trigger:'change'
似乎不行,还是只有提交的时候会显示请输入,我把自定义的input内容删光不会显示请输入
@form-create/ant-design-vue@3.1.28
自定义组件的表单验证,清空自定义组件的值,需要点击提交才能显示必填提示
index.vue
TestComponent.vue