Silver Formily Antd Mobile0.0.0-alpha.1

Appearance

Mobile Preview Open
Open mobile preview

Submit ​

Submit 是提交按钮，基于 antd-mobile Button 实现。传入 onSubmit 时，点击触发整表校验，校验通过后回调并拿到表单值；未传时使用原生表单提交。

基础使用 ​

tsx
import {
  FormButtonGroup,
  FormItem,
  FormLayout,
  Input,
  Submit,
} from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'

const form = createForm({
  initialValues: {
    username: '张三',
  },
})

function onSubmit(values: unknown) {
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function SubmitBasic() {
  return (
    <FormProvider form={form}>
      <FormLayout>
        <Field
          name="username"
          title="用户名"
          required
          decorator={[FormItem]}
          component={[Input]}
        />
        <FormButtonGroup>
          <Submit onSubmit={onSubmit}>提交</Submit>
        </FormButtonGroup>
      </FormLayout>
    </FormProvider>
  )
}

异步提交 ​

onSubmit 返回 Promise 时按钮自动进入 loading 状态；也可通过 loading={true} 开启加载态。实际加载状态为 form.submitting || loading，加载期间禁用按钮，loading={false} 不会关闭表单正在提交的状态。

tsx
import {
  FormButtonGroup,
  FormItem,
  FormLayout,
  Input,
  Submit,
} from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'

function sleep(ms: number) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

const form = createForm({
  initialValues: {
    username: '张三',
  },
})

async function onSubmit(values: unknown) {
  await sleep(1500)
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function SubmitLoading() {
  return (
    <FormProvider form={form}>
      <FormLayout>
        <Field
          name="username"
          title="用户名"
          required
          decorator={[FormItem]}
          component={[Input]}
        />
        <FormButtonGroup>
          <Submit
            onSubmit={onSubmit}
          >
            异步提交
          </Submit>
        </FormButtonGroup>
      </FormLayout>
    </FormProvider>
  )
}

校验反馈 ​

onSubmitFailed 在校验失败时回调，可在此给出轻提示。

tsx
import {
  FormButtonGroup,
  FormItem,
  FormLayout,
  Input,
  Submit,
} from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'
import { Toast } from 'antd-mobile'

const form = createForm()

function onSubmit(values: unknown) {
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function SubmitValidate() {
  return (
    <FormProvider form={form}>
      <FormLayout>
        <Field
          name="username"
          title="用户名"
          required
          decorator={[FormItem]}
          component={[Input]}
        />
        <Field
          name="email"
          title="邮箱"
          required
          validator="email"
          decorator={[FormItem]}
          component={[Input]}
        />
        <FormButtonGroup>
          <Submit
            onSubmit={onSubmit}
            onSubmitFailed={() => Toast.show({
              content: '校验未通过，请检查表单',
            })}
          >
            提交
          </Submit>
        </FormButtonGroup>
      </FormLayout>
    </FormProvider>
  )
}

API ​

属性 ​

属性名类型描述默认值
onSubmitFunction校验通过后的提交回调-
onSubmitSuccessFunction提交成功回调-
onSubmitFailedFunction校验失败回调-
onClickFunction点击回调，返回 false 可阻止提交-
loadingboolean与表单提交状态合并，加载期间禁用-

继承 antd-mobile Button 的外观配置项，请参考 Button 官方文档。