We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
@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>
The text was updated successfully, but these errors were encountered:
[{ required: true, type: 'string', message: '请输入', trigger:'change'}]
可以通过trigger设置验证触发方式
Sorry, something went wrong.
, trigger:'change'
似乎不行,还是只有提交的时候会显示请输入,我把自定义的input内容删光不会显示请输入
No branches or pull requests
@form-create/ant-design-vue@3.1.28
自定义组件的表单验证,清空自定义组件的值,需要点击提交才能显示必填提示
index.vue
TestComponent.vue
The text was updated successfully, but these errors were encountered: