antd vue 表单中子组件怎么做校验？

  • Z时代
  • 2024-03-10
  • 分类：IT

antd vue 表单中嵌套了自定义的子组件，这个组件内没有表单，请问怎么做校验

<a-form-model-item
     label="name"
     :labelCol="{ span: 6 }"
     :wrapperCol="{ span: 14 }"
     prop="name"
     >
     <TreeList />
</a-form-model-item>
name: [ // 子组件选择了内容，但是这里一直提示请输入，不走下面的自定义校验方法checkName
          { required: true, message: "请输入", trigger: "blur" }, 
          { validator: checkName, trigger: "blur" },
      ],
 const checkName = (rule, value, callback) => {
      if (!value) {
        callback(new Error(""));
      }
      callback();
    };

回答：

  1. 走没走自定义校验方法，你肉眼看不出来的
  2. 组件和formitem没有做绑定，缺v-model

回答：

看了下antdv 的 FormItem 组件的源码
它向子组件provide了onFieldBlur和onFiledChange方法

useProvideFormItemContext(
      {
        id: fieldId,
        onFieldBlur: () => {
          if (props.autoLink) {
            onFieldBlur();
          }
        },
        onFieldChange: () => {
          if (props.autoLink) {
            onFieldChange();
          }
        },
        clearValidate,
      },
      computed(() => {
        return !!(props.autoLink && formContext.model.value && fieldName.value);
      }),
    );

调用这两个方法会触发验证，所以你在子组件中inject他提供的方法，然后子组件选择了内容，手动调用这两个中的一个，应该就会触发验证

以上是 antd vue 表单中子组件怎么做校验？ 的全部内容， 来源链接： utcz.com/p/933655.html

回到顶部