form组件validate方法报错

[SyanH]

如题，表单validate方法调用第一次正常，调用更多就会报错

const saveAccount = async () => {
    const vail = await accountFormRef.value.validate()
    if (vail) {
        // 验证通过
}

报错内容
index.es.js:6012 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'map') at index.es.js:6012:38

const errors = err.inner.map((error2) => ({

[lewkamtao]

首次调用正常是吧？我看看

[lewkamtao]

更新一下 lew-ui@1.7.11 试试

[SyanH]

已升级到1.7.11
现在是报下边这个错
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'forEach') at index.es.js:6038:20

errors.forEach((e) => {
  let index2 = opt.findIndex(
    (c) => c.field == e.field()
  );
  if (index2 >= 0 && opt) {
    opt[index2].errMessage = e == null ? void 0 : e.message;
  }
});
componentOptions.value = JSON.parse(JSON.stringify(opt));

[lewkamtao]

能不能提供一下完整的代码，我想试一下，主要是我demo跑起来是没问题的。

[SyanH]

我对比了一下demo，发现问题应该出现在提交按钮上，我是用的modal上的确认按钮来提交表单的，你的demo是表单options中定义的，我试了确实没问题。

<template>
    <lew-button type="fill" @click="showModal = true" text="编辑账号" />
    <lew-modal
        v-model:visible="showModal"
        width="400px"
        title="账号信息"
        :okProps="{ text: '保存', loading: saveAccountLoading}"
        @ok="saveAccount"
        @cancel="showModal = false"
    >
        <div style="padding: 40px 40px 0 0">
            <lew-form
                ref="accountFormRef"
                :options="accountOptions"
                :label-width="80"
            />
        </div>
    </lew-modal>
</template>

<script setup>
import { ref } from 'vue'
import * as Yup from 'yup'
const showModal = ref(false)
const saveAccountLoading = ref(false)
const accountFormRef = ref(null)

const saveAccount = async () => {
    const vail = await accountFormRef.value.validate()
    console.log(vail)
}

const userinfo = {
    username: 'admin',
    email: 'xxx@gmail.com',
    mobile: '13888888888'
}

const accountOptions = ref([
    {
        label: '用户名',
        field: 'username',
        as: 'input',
        value: userinfo.username,
        props: {
            readonly: true,
        }
    },
    {
        label: '邮箱',
        field: 'email',
        value: userinfo.email,
        rules: Yup.string()
            .email('请输入正确的邮箱')
            .required('请输入邮箱'),
        as: 'input',
    },
    {
        label: '手机号',
        field: 'mobile',
        value: userinfo.mobile,
        rules: Yup.string()
            .matches(/^1[3-9]\d{9}$/, '请输入正确的手机号')
            .required('请输入手机号'),
        as: 'input',
    },
    {
        label: '旧密码',
        field: 'password',
        as: 'input',
        props: {
            type: 'password',
            showPassword: true
        }
    },
    {
        label: '新密码',
        field: 'new_password',
        as: 'input',
        props: {
            type: 'password',
            showPassword: true
        }
    },
    {
        label: '确认密码',
        field: 'confirm_password',
        as: 'input',
        props: {
            type: 'password',
            showPassword: true
        }
    }
])
</script>

[lewkamtao]

哦哦 我知道问题了，在options设置value是有问题的，我改了一下，提供了一个setForm的方法可以直接设置默认值。

<template>
    <lew-button type="fill" @click="showModal = true" text="编辑账号" />
    <lew-modal
        v-model:visible="showModal"
        width="400px"
        title="账号信息"
        :okProps="{ text: '保存', loading: saveAccountLoading }"
        @ok="saveAccount"
        @cancel="showModal = false"
        @show="showHandle"
    >
        <div style="padding: 40px 40px 0 0">
            <lew-form
                ref="accountFormRef"
                :options="accountOptions"
                :label-width="80"
            />
        </div>
    </lew-modal>
</template>

<script setup>
import * as Yup from 'yup';
const showModal = ref(false);
const saveAccountLoading = ref(false);
const accountFormRef = ref(null);

const saveAccount = async () => {
    const vail = await accountFormRef.value.validate();
    console.log(vail);
};

const showHandle = () => {
    if (accountFormRef.value) {
        // 设置表单
        accountFormRef.value.setForm({
            username: 'admin',
            email: 'xxx@gmail.com',
            mobile: '13888888888',
        });
    } else {
        setTimeout(() => {
            showHandle();
        }, 50);
    }
};

const accountOptions = ref([
    {
        label: '用户名',
        field: 'username',
        as: 'input',
        props: {
            readonly: true,
        },
    },
    {
        label: '邮箱',
        field: 'email',
        rules: Yup.string().email('请输入正确的邮箱').required('请输入邮箱'),
        as: 'input',
    },
    {
        label: '手机号',
        field: 'mobile',
        rules: Yup.string()
            .matches(/^1[3-9]\d{9}$/, '请输入正确的手机号')
            .required('请输入手机号'),
        as: 'input',
    },
    {
        label: '旧密码',
        field: 'password',
        as: 'input',
        props: {
            type: 'password',
            showPassword: true,
        },
    },
    {
        label: '新密码',
        field: 'new_password',
        as: 'input',
        props: {
            type: 'password',
            showPassword: true,
        },
    },
    {
        label: '确认密码',
        field: 'confirm_password',
        as: 'input',
        props: {
            type: 'password',
            showPassword: true,
        },
    },
]);
</script>

[lewkamtao]

要更新 lew-ui@1.7.13

[SyanH]

好的，感谢