自定义组件的表单验证，清空自定义组件的值，需要点击提交才能显示必填提示

[leleccccc]

@form-create/[email protected]

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>

[xaboy]

[{ required: true, type: 'string', message: '请输入', trigger:'change'}]

可以通过trigger设置验证触发方式

[leleccccc]

, trigger:'change'

似乎不行，还是只有提交的时候会显示请输入，我把自定义的input内容删光不会显示请输入