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 | Function | Click handler. Return false to block submission. | - |
onSubmit | Function | Submit callback | - |
onSubmitSuccess | Function | Submit success callback | - |
onSubmitFailed | Function | Submit validation failure callback | - |
submit | boolean | Whether to render as a native submit button | true |
IFormFeedback
See IFormFeedback.