如何解决Ant Design Vue点击新增一个日期选择器校验问题？

Question

表单的校验一直存在，选择了值也一直存在该怎么解决
使用Ant Design Vue组件库3.2的版本。项目是vue3的但是用vue2写的

点击右边的+ 号，新增一个日期选择

但是不知道为什么这个校验会一直都存在。选择了日期也会存在校验的提示，就像下面的图一样

其他的表单，只要是选择了值校验就会消失掉。这个是怎么回事

<div v-for="(i, index) in frequencyDate" :key="index">
                <a-form-item
                    :label="i.label"
                    :name="i.name"
                    :rules="i.rules"
                >
                    <a-space direction="horizontal">
                        <a-date-picker v-model:value="i.value" value-format="YYYY-MM-DD" style="width:240px"/>
                        <plus-circle-outlined  @click="addFormItem(index)" v-if="index === frequencyDate.length - 1"/>
                        <minus-circle-outlined v-if="index > 0" @click="removeFormItem(index)"/>
                    </a-space>
                </a-form-item>
            </div>

 data() {
    return {
      frequencyDate: [
        {label: '第1次', name: 'dyc', value: '',rules: [{ required: true, message: '请选择日期', trigger: 'change' }]}

// 添加
addFormItem(index) {
        const newIndex = index + 1;
        const label = `第${this.frequencyDate.length + 1}次`;
        const name = `dyc${this.frequencyDate.length}`;
        const newFormItem = { label, name, value: '', rules: [{ required: true, message: '请选择日期', trigger: 'change' }] };
        this.frequencyDate.splice(newIndex, 0, newFormItem);
        // 更新剩余项的名称和规则
        this.frequencyDate.forEach((item, i) => {
            item.label = `第${i + 1}次`;
            item.name = `dyc${i}`;
            item.rules = [{ required: true, message: '请选择日期', trigger: 'change' }];
        });
    },
    
   // 删除
    removeFormItem(index) {
      this.frequencyDate.splice(index, 1);
      // 更新剩余项的名称
      this.frequencyDate.forEach((item, i) => {
        item.label = `第${i + 1}次`;
        item.name = `dyc${i}`;
      });
    }
      ]
    }

单独添加表单校验也不行

Answer 1

<a-form-item>是嵌套在<a-form>内部的，会不会是写法的问题呢