Silver Formily Antd Mobile0.0.0-alpha.1

Appearance

Mobile Preview Open
Open mobile preview

Reset ​

Reset 是重置按钮，基于 antd-mobile Button 实现。点击时将表单重置回 initialValues。

基础使用 ​

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

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

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

export default function ResetBasic() {
  return (
    <FormProvider form={form}>
      <FormLayout>
        <Field
          name="username"
          title="用户名"
          required
          decorator={[FormItem]}
          component={[Input]}
        />
        <Field
          name="nickname"
          title="昵称"
          decorator={[FormItem]}
          component={[Input]}
        />
        <FormButtonGroup layout="horizontal">
          <Reset>重置</Reset>
          <Submit onSubmit={onSubmit}>提交</Submit>
        </FormButtonGroup>
      </FormLayout>
    </FormProvider>
  )
}

强制清空 ​

forceClear 会清空到空值而非初始值；validate 控制重置后是否触发校验。

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

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

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

export default function ResetForceClear() {
  return (
    <FormProvider form={form}>
      <FormLayout>
        <Field
          name="username"
          title="用户名"
          required
          decorator={[FormItem]}
          component={[Input]}
        />
        <Field
          name="nickname"
          title="昵称"
          decorator={[FormItem]}
          component={[Input]}
        />
        <FormButtonGroup layout="horizontal">
          <Reset forceClear validate>
            强制清空
          </Reset>
          <Submit onSubmit={onSubmit}>提交</Submit>
        </FormButtonGroup>
      </FormLayout>
    </FormProvider>
  )
}

API ​

属性 ​

属性名类型描述默认值
forceClearboolean是否强制清空到空值false
validateboolean重置后是否触发校验-
onResetValidateSuccessFunction重置校验成功回调-
onResetValidateFailedFunction重置校验失败回调-
onClickFunction点击回调，返回 false 可阻止重置-

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