Silver Formily Vant0.0.0

Appearance

Mobile Preview Open
Open mobile preview

Reset ​

Reset 是和 Formily 表单状态打通的 Vant 重置按钮，支持恢复初始值、强制清空、重置后再次校验，以及成功/失败回调。

使用约定

  • Reset 会固定渲染成普通按钮，不参与原生 submit
  • 默认执行 form.reset('*', { forceClear })
  • 开启 validate 后，会在重置完成后继续调用 form.validate()
  • 默认会渲染为 default、round、block 按钮，默认文案为 重置
  • 当表单处于 submitting 时，Reset 会自动进入 disabled

基础重置 ​

vue
<script setup lang="ts">
import { createForm } from '@formily/core'
import { Form, FormButtonGroup, FormItem, Input, Reset } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'

const form = createForm({
  initialValues: {
    nickname: 'silver-formily',
    city: '杭州',
  },
})
</script>

<template>
  <p class="demo-tip">
    先修改下面的输入内容，再点击重置按钮，可以看到字段值恢复到初始值。
  </p>

  <Form :form="form" label-width="4.5em">
    <Field
      name="nickname"
      title="昵称"
      :decorator="[FormItem]"
      :component="[Input, { placeholder: '请输入昵称' }]"
    />
    <Field
      name="city"
      title="城市"
      :decorator="[FormItem]"
      :component="[Input, { placeholder: '请输入城市' }]"
    />
    <FormButtonGroup>
      <Reset />
    </FormButtonGroup>
  </Form>
</template>

<style scoped>
.demo-tip {
  padding: 12px 16px 0;
  color: var(--van-text-color-2);
  font-size: 13px;
  line-height: 1.6;
}
</style>

重置后校验 ​

vue
<script setup lang="ts">
import { createForm } from '@formily/core'
import { Form, FormButtonGroup, FormItem, Input, Reset } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  initialValues: {
    keyword: '表单重置',
  },
})

async function handleValidateSuccess(payload: unknown) {
  await showDemoResult(payload, '重置后校验通过')
}

async function handleValidateFailed(error: unknown) {
  await showDemoResult(error, '重置后校验失败')
}
</script>

<template>
  <p class="demo-tip">
    第一个按钮会恢复初始值后再校验，第二个按钮会强制清空并触发失败回调。
  </p>

  <Form :form="form" label-width="4.5em">
    <Field
      name="keyword"
      title="关键词"
      :validator="{ required: true, message: '请输入关键词' }"
      :decorator="[FormItem]"
      :component="[Input, { placeholder: '请输入关键词' }]"
    />
    <FormButtonGroup>
      <Reset
        validate
        :on-reset-validate-success="handleValidateSuccess"
      >
        恢复并校验
      </Reset>
      <Reset
        type="danger"
        force-clear
        validate
        :on-reset-validate-failed="handleValidateFailed"
      >
        强制清空并校验
      </Reset>
    </FormButtonGroup>
  </Form>
</template>

<style scoped>
.demo-tip {
  padding: 12px 16px 0;
  color: var(--van-text-color-2);
  font-size: 13px;
  line-height: 1.6;
}
</style>

API ​

Reset 专属属性 ​

其余按钮属性主要继承自 Vant Button 官方文档（正式站）。

属性名类型描述默认值
onClick(event: MouseEvent) => void | boolean点击事件，返回 false 时会阻止重置-
forceClearboolean是否强制清空字段值而不是恢复初始值false
validateboolean重置后是否继续执行表单校验false
onResetValidateSuccess(payload: any) => void重置后校验成功回调-
onResetValidateFailed(error: any) => void重置后校验失败回调-

与 Form 的配合方式 ​

  • Reset：恢复表单到初始值
  • Reset forceClear：强制清空当前字段值
  • Reset validate：重置后立即重新校验
  • Reset forceClear validate：适合演示必填项被清空后的失败回调
  • type / round / block：都可以显式覆盖默认值