update: 优化FormBuilder组件的验证

This commit is contained in:
xieyonghong 2023-01-11 16:10:58 +08:00
parent bf493c3a96
commit e2e12cd5c5
1 changed files with 5 additions and 7 deletions

View File

@ -1,6 +1,7 @@
<template> <template>
<div class='JForm-content'> <div class='JForm-content'>
<a-form <a-form
ref='form'
v-bind='props' v-bind='props'
:model='formData.data' :model='formData.data'
layout='vertical' layout='vertical'
@ -95,13 +96,12 @@ import type { Options, OptionsItem, OptionsComponent } from './index.modules'
import { PropType } from 'vue' import { PropType } from 'vue'
import { get, isArray, isString, pick, set } from 'lodash-es' import { get, isArray, isString, pick, set } from 'lodash-es'
import { formProps } from 'ant-design-vue/es/form' import { formProps } from 'ant-design-vue/es/form'
import { Form } from 'ant-design-vue';
import componentType from './util' import componentType from './util'
import { import {
QuestionCircleOutlined QuestionCircleOutlined
} from '@ant-design/icons-vue'; } from '@ant-design/icons-vue';
const useform = Form.useForm; const form = ref()
const props = defineProps({ const props = defineProps({
...formProps, ...formProps,
@ -128,8 +128,6 @@ const formOptions = reactive<{ data: OptionsComponent[]}>({
data: [] data: []
}) // Item }) // Item
const { resetFields, validate} = useform(formData, props.rules)
const rowType = ref<string | undefined>(undefined) const rowType = ref<string | undefined>(undefined)
const calculateItemSpan = (span?: number | string) => { const calculateItemSpan = (span?: number | string) => {
@ -196,7 +194,7 @@ const handleFormData = (data: Options, parentKey: Array<string> = []): any => {
* 重置表单 * 重置表单
*/ */
const resetModel = () => { const resetModel = () => {
resetFields() form.value.resetFields()
} }
/** /**
@ -204,9 +202,9 @@ const resetModel = () => {
*/ */
const formValidate = () => { const formValidate = () => {
return new Promise((res, rej) => { return new Promise((res, rej) => {
validate().then(data => { form.value.validate().then(() => {
res(formData.data) res(formData.data)
}).catch(err => { }).catch((err: any) => {
rej(err) rej(err)
}) })
}) })