Antd-Vue动态控制表单校验踩坑记录

前言

在实际开发中，我们经常需要在表单中加入一些动态控制的校验规则。例如，当一个表单选项被选中时，其他表单字段的必填校验规则可能需要随之改变。在Antd-Vue中，我们可以通过a-form-model-item组件的prop属性来实现这种动态控制。

踩坑经历

我最近在使用Antd-Vue开发一个项目时，就遇到了这样的问题。在表单中，有一个时间字段，当一个待定选项被选中时，时间字段的必填校验规则应该被取消。一开始，我按照官方文档的示例，在a-form-model-item组件上添加了一个prop属性，并通过v-model绑定了一个计算属性。计算属性的返回值是一个布尔值，用来控制时间字段是否必填。

<a-form-model-item :prop="isTimeRequired" label="时间" rules={[{ required: isTimeRequired, message: '请选择时间' }]}>
  <a-input-picker v-model="time" placeholder="请选择时间" />
</a-form-model-item>

computed: {
  isTimeRequired() {
    return this.selectedOption !== 'pending';
  },
},

在初始化的时候，一切都很好。时间字段的必填校验规则被正确地取消了。但是，当我选中待定选项时，时间字段的必填校验规则却依然存在。这显然是不对的。

原因分析

经过一番排查，我终于找到了原因。原来，在Antd-Vue中，a-form-model-item组件的prop属性只在初始化的时候起作用。也就是说，当表单数据发生变化时，prop属性的值不会更新。因此，当我在表单中选中待定选项时，isTimeRequired计算属性的值虽然发生了变化，但a-form-model-item组件却并不知道，所以时间字段的必填校验规则依然存在。

解决方案

既然知道了问题的原因，解决方案也就显而易见了。我们需要在表单数据发生变化时，手动更新a-form-model-item组件的prop属性。我们可以通过以下代码来实现：

watch: {
  selectedOption(newVal, oldVal) {
    this.$refs.form.updateItemProp('isTimeRequired', newVal !== 'pending');
  },
},

methods: {
  updateItemProp(propName, propValue) {
    this.$refs.form.updateItemProp(propName, propValue);
  },
},

这样，当我们在表单中选中待定选项时，isTimeRequired计算属性的值会发生变化，同时，a-form-model-item组件的prop属性也会被更新，时间字段的必填校验规则就会被正确地取消。

总结

在Antd-Vue中，使用a-form-model-item组件的prop属性来控制表单校验规则时，需要注意prop属性只在初始化的时候起作用。当表单数据发生变化时，我们需要手动更新a-form-model-item组件的prop属性。这样才能保证表单校验规则能够正确地更新。