使用插槽 ApiSelect首次选择值时仍然提示校验

[web-wade]

trafficstars

[ljw-codeking]

src\hooks\component\useFormItem.ts把nextTick给注释掉就可以解决这个问题了，我不明白这里为什么要加nextTick

[web-wade]

src\hooks\component\useFormItem.ts 把nextTick给注释掉就可以解决这个问题了，我不明白这里为什么要加nextTick

测试了还是不可以

[wangjue666]

@web-wade 添加 autoLink 为 false 试试

[wangjue666]

是拉取的最新版本的仓库代码吗？

[web-wade]

@wangjue666 最新的代码，main分支，不设置默认值，上来直接操作，不要操作其他输入框，操作其他之后再选择就不会触发

[wangjue666]

嗯 你把 component: 'ApiSelect', 写成这样就会设定上

[web-wade]

@wangjue666 这样可以设定，但是没有选择值点击提交出现验证，在选择不会取消

[wangjue666]

或者

{
      field: 'field31',
      component: 'Input',
      label: '下拉本地搜索',
      helpMessage: ['ApiSelect组件', '远程数据源本地搜索', '只发起一次请求获取所有选项'],
      required: true,
      slot: 'localSearch',
      colProps: {
        span: 8,
      },
      itemProps: {
        autoLink: false,
      },
      defaultValue: '',
    },

[web-wade]

这样解决都会导致前一个问题，先提交在修改不能触发验证

[web-wade]

可以在change事件里面调用一下验证

[MosYCo]

我试了一下，在handleChange里emit('update:value')就可以了。其实这里我不是很明白为什么要watch state.value，state已经是双向绑定的了, usrRulesFormItem里已经有watchEffect了，感觉这里再watch有点多余

[badaozhenqi]

src\hooks\component\useFormItem.ts把nextTick给注释掉就可以解决这个问题了，我不明白这里为什么要加nextTick

目前用这个方法可以解决，没有深究为什么。

[rookiePrgrmer]

src\hooks\component\useFormItem.ts把nextTick给注释掉就可以解决这个问题了，我不明白这里为什么要加nextTick

这样做会导致，onChange事件的第二个参数，总是上一次变化后的值，不是当前值。

[rookiePrgrmer]

https://github.com/vbenjs/vue-vben-admin/blob/89830ec7e69a7cab55e6ccf90b74377bcbadf44c/src/components/Form/src/components/FormItem.vue#L417

请问下，这里对props.schema.itemProps赋值以后，不直接使用props.schema.itemProps，而是继续使用上面代码的itemProps真的没有问题吗？

[lovelyJason]

俺的那篇issue里也是这个问题

[lovelyJason]

最终你咋解决的

[supermebing]

有没有结果？

[lovelyJason]

有没有结果？ 我反正是有结果了

[betgar]

分享一下，我在Modal中使用表单Form的一点经验，规避问题的经验：

 <BasicModal
    v-bind="$attrs"
    :min-height="30"
    :maskClosable="false"
    title="测试"
    @register="registerModal"
    @cancel="closeModal"
    @open-change="onVisibleChange"
    @ok="onOk"
  >
    <BasicForm
      @register="registerForm"
      :model="compStates.dataModel"
      @field-value-change="onFieldValueChange"
    />
  </BasicModal>

const compStates = ref({
    dataModel: { id: '' },
  });
// 判断是否是新增
const isNewModelRef = computed(() => {
    return isNil(compStates.value.dataModel.id) || isEmpty(compStates.value.dataModel.id);
  });

// 表单
  const [registerForm, { validate: validateForm, getFieldsValue, setFieldsValue, clearValidate, validateFields }] =
    useForm(useFormOptions());

// modal
  const [registerModal, { closeModal }] = useModalInner((data: ViewEntityInfoRel) => {
    // compStates.value.dataModel = data;
    setFieldsValue(data);
  });

// modal显示
  function onVisibleChange(visible) {
    if (visible) {
      nextTick(() => {
        // 新增，打开时，不想看到已经触发的validate message
        if (isNewModelRef.value) {
          clearValidate();
        }
      });
    }
  }

// 字段变更
const onFieldValueChange = () => {
    // 消除异常的验证消息
    nextTick(() => validateForm()); // clearValidate; validateFields 
  };

上述的代码 仅供示意，参考，不可运行

1. modal显示时，字段已经显示了校验信息，规避这个问题，在onFieldValueChange 中clearValidate()信息
2. 表单的元素，需要渲染成 自定义的 静态文本，表单需要配置model属性，如果不配置model属性，render函数内部无法取值

{
      field: 'id',
      component: 'Input',
      label: 'ID',
      labelWidth: '100px',
      colProps: {
        span: 22,
      },
      render({ model, field }) { // 如果不配置model属性，这里的model是空的，不能取值
        return h('span', { class: 'ant-form-text' }, model[field]);
      },
    }

3. ApiSelect异步加载的数据，第一次选择之后，出现校验信息的规避尝试

• Form配置model属性，虽然你不一定需要用
• Modal的回调函数里面使用setFieldsValue设置表单的初始化值（上述代码有示例），尝试直接compStates.value.dataModel = data 赋值的方式不行
• 如果还不生效，考虑结合onFieldValueChange试试