Submit
Submit button
Basic Submit
<script lang="ts" setup>
import { createForm } from '@silver-formily/core'
import {
FormButtonGroup,
FormItem,
Input,
Submit,
} from '@silver-formily/element-plus'
import { createSchemaField, FormProvider } from '@silver-formily/vue'
const { SchemaField, SchemaStringField } = createSchemaField({
components: { FormItem, Input },
})
const form = createForm()
async function log(v: Record<string, any>) {
console.log(v)
}
</script>
<template>
<FormProvider :form="form">
<SchemaField>
<SchemaStringField
required
name="input1"
title="输入框"
x-decorator="FormItem"
x-component="Input"
/>
<SchemaStringField
required
title="输入框"
name="input2"
x-decorator="FormItem"
x-component="Input"
/>
</SchemaField>
<FormButtonGroup align-form-item>
<Submit @submit="log">
提交
</Submit>
</FormButtonGroup>
</FormProvider>
</template>输入框:
输入框:
:
查看源码
Duplicate-Submission Guard
<script lang="ts" setup>
import { createForm } from '@silver-formily/core'
import { FormButtonGroup, FormItem, Input, Submit } from '@silver-formily/element-plus'
import { createSchemaField, FormProvider } from '@silver-formily/vue'
const { SchemaField, SchemaStringField } = createSchemaField({
components: { FormItem, Input },
})
const form = createForm()
function handleSubmit(values: Record<string, any>) {
return new Promise((resolve) => {
setTimeout(() => {
console.log(values)
resolve(void 0)
}, 2000)
})
}
</script>
<template>
<FormProvider :form="form">
<SchemaField>
<SchemaStringField
required
name="input1"
title="输入框"
x-decorator="FormItem"
x-component="Input"
/>
<SchemaStringField
required
title="输入框"
name="input2"
x-decorator="FormItem"
x-component="Input"
/>
</SchemaField>
<FormButtonGroup align-form-item>
<Submit @submit="handleSubmit">
提交
</Submit>
</FormButtonGroup>
</FormProvider>
</template>输入框:
输入框:
:
查看源码
API
Most props are inherited from the Button component. The following are Submit-specific API props.
| Prop | Type | Description | Default |
|---|---|---|---|
onClick | (event: MouseEvent) => void | boolean | Click handler. Return false to block submission. | - |
onSubmit | (values: any) => Promise<any> | any | Submit callback | - |
onSubmitSuccess | (payload: any) => void | Submit success callback | - |
onSubmitFailed | (feedbacks: [IFormFeedback](https://core.silver-formily.org/api/models/Form#iformfeedback)[]) => void | Submit validation failure callback | - |