记录--antd-vue之form表单行内验证问题
记录--antd-vue之form表单行内验证问题
·
在使用a-form行内验证时提交没反应,翻阅其他资料后发现需要在提交时需要单独调用当前表单的验证事件
validate
;
首先给表单设置ref方便获取,然后调用$refs;
使用vue3语法糖(setup)的话是没有this指向的,要使用vue中defineComponent(组件实例)来获取$refs代码如下:
<template>
<a-form
:model="formState"
ref="basic"
autocomplete="off"
@finish="onFinish"
>
<a-form-item
label="Username"
name="username"
:rules="[{ required: true, message: 'Please input your username!' }]"
>
<a-input v-model:value="formState.username" />
</a-form-item>
<a-form-item
label="Password"
name="password"
:rules="[{ required: true, message: 'Please input your password!' }]"
>
<a-input-password v-model:value="formState.password" />
</a-form-item>
<a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
<a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
<a-button type="primary" html-type="submit">Submit</a-button>
</a-form-item>
</a-form>
</template>
<script lang="ts" setup>
import { defineComponent, reactive,getCurrentInstance } from 'vue';
const { proxy }: any = getCurrentInstance();
interface FormState {
username: string;
password: string;
remember: boolean;
}
const formState = reactive<FormState>({
username: '',
password: '',
remember: true,
});
const onFinish = () => {
proxy.$refs.basic.validate().then((res: any) => {});
};
</script>
更多推荐
已为社区贡献4条内容
所有评论(0)