Silver Formily Antd Mobile0.0.0-alpha.1

Appearance

Mobile Preview Open
Open mobile preview

Form ​

Form 将 Formily 实例、预览占位符和自动提交统一封装，内部使用 FormLayout 展示表单内容，外层原生 form 接收提交事件。

注意

  • 使用 Form 的 onAutoSubmit 时，内部 Submit 无需设置 onSubmit 或 submit，让按钮触发原生提交事件即可。
  • 为 Submit 设置 onSubmit 后，该按钮会自行提交表单，并使用自身的成功、失败回调，不会触发 Form.onAutoSubmit。
  • onAutoSubmitFailed 接收校验反馈数组；如果 onAutoSubmit 抛出异常或返回拒绝的 Promise，也会进入该回调，业务代码应按实际错误类型处理。
  • Form 会阻止原生提交的默认行为和事件冒泡。不要将它嵌套在其他原生 form 或 Form 中。

基础使用 ​

通过 form 传入 createForm() 创建的实例，无需再包裹 FormProvider。整体的封装逻辑与其他组件库封装保持一致。

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

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

export default function FormBasic() {
  const form = useMemo(() => createForm({ initialValues: { username: '张三' } }), [])

  return (
    <Form
      form={form}
      onAutoSubmit={onSubmit}
      onAutoSubmitFailed={() => Toast.show({ content: '请填写必填项后再提交' })}
    >
      <Field name="username" title="用户名" required decorator={[FormItem]} component={[Input]} />
      <FormButtonGroup layout="horizontal">
        <Reset>重置</Reset>
        <Submit>提交</Submit>
      </FormButtonGroup>
    </Form>
  )
}

继承外层实例 ​

已有 FormProvider 时，可以省略 form 属性。显式传入的 form 优先于外层实例；两者都不存在时不渲染内容。

布局属性直接透传给内部 FormLayout，例如 layout="vertical"、labelWidth 和 colon。

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

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

export default function FormInherited() {
  const form = useMemo(() => createForm({ initialValues: { address: '上海市' } }), [])

  return (
    <FormProvider form={form}>
      <Form layout="vertical" onAutoSubmit={onSubmit}>
        <Field name="address" title="地址" decorator={[FormItem]} component={[Input]} />
        <FormButtonGroup><Submit>提交地址</Submit></FormButtonGroup>
      </Form>
    </FormProvider>
  )
}

预览占位符 ​

previewTextPlaceholder 为内部的 PreviewText 提供空值占位符。结合表单的 readPretty 模式使用时，没有值的输入框会显示该占位符。

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

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

export default function FormPreview() {
  const form = useMemo(() => createForm({
    pattern: 'readPretty',
    initialValues: { username: '张三' },
  }), [])

  return (
    <Form form={form} previewTextPlaceholder="暂无信息" onAutoSubmit={onSubmit}>
      <Field name="username" title="用户名" decorator={[FormItem]} component={[Input]} />
      <Field name="email" title="邮箱" decorator={[FormItem]} component={[Input]} />
      <FormButtonGroup><Submit>查看表单值</Submit></FormButtonGroup>
    </Form>
  )
}

API ​

属性名类型描述默认值
formForm（来自 @silver-formily/core）表单实例，省略时继承外层 FormProvider-
previewTextPlaceholderReact.ReactNode预览组件的空值占位符'N/A'
onAutoSubmit(values: Form['values']) => any校验通过后执行，支持返回 Promise-
onAutoSubmitFailed(error: IFormFeedback[]) => void提交失败回调，运行时也可能收到提交回调抛出的异常-
childrenReact.ReactNode表单内容-

其余属性继承 FormLayout，均传给内部布局容器。组件不提供原生 form 属性的透传。