update: 优化FormBuilder组件的验证
This commit is contained in:
parent
bf493c3a96
commit
e2e12cd5c5
|
@ -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)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue