100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 记录--antd-vue之form表单行内验证问题

记录--antd-vue之form表单行内验证问题

时间:2020-12-10 04:25:00

相关推荐

记录--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-itemlabel="Username"name="username":rules="[{ required: true, message: 'Please input your username!' }]"><a-input v-model:value="formState.username" /></a-form-item><a-form-itemlabel="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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。