FormStep

Step form component

Note

This component is intended for Schema-based scenarios only.

Markup Schema Example

Tip

Objects created by createFormStep are reactive values from @silver-formily/reactive. In the example, FormConsumer is used to make updates render correctly.

<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import {
  FormButtonGroup,
  FormItem,
  FormStep,
  Input,
  Submit,
} from '@silver-formily/element-plus'
import { createSchemaField, FormConsumer, FormProvider } from '@silver-formily/vue'
import { ElButton } from 'element-plus'

const { SchemaField, SchemaVoidField, SchemaStringField } = createSchemaField({
  components: {
    FormItem,
    FormStep,
    Input,
  },
})
const formStep = FormStep.createFormStep()
const form = createForm()

async function log() {
  formStep.submit(console.log)
}
</script>

<template>
  <FormProvider :form="form">
    <SchemaField>
      <SchemaVoidField x-component="FormStep" :x-component-props="{ formStep }">
        <SchemaVoidField
          x-component="FormStep.StepPane"
          :x-component-props="{ title: 'Step 1' }"
        >
          <SchemaStringField
            name="aaa"
            x-decorator="FormItem"
            required
            x-component="Input"
          />
        </SchemaVoidField>
        <SchemaVoidField
          x-component="FormStep.StepPane"
          :x-component-props="{ title: 'Step 2' }"
        >
          <SchemaStringField
            name="bbb"
            x-decorator="FormItem"
            required
            x-component="Input"
          />
        </SchemaVoidField>
        <SchemaVoidField
          type="void"
          x-component="FormStep.StepPane"
          :x-component-props="{ title: 'Step 3' }"
        >
          <SchemaStringField
            name="ccc"
            x-decorator="FormItem"
            required
            x-component="Input"
          />
        </SchemaVoidField>
      </SchemaVoidField>
    </SchemaField>
    <FormConsumer>
      <template #default>
        <FormButtonGroup>
          <ElButton
            :disabled="!formStep.allowBack"
            @click="
              () => {
                formStep.back()
              }
            "
          >
            Previous
          </ElButton>
          <ElButton
            :disabled="!formStep.allowNext"
            @click="
              () => {
                formStep.next()
              }
            "
          >
            Next
          </ElButton>
          <Submit :disabled="formStep.allowNext" @submit="log">
            Submit
          </Submit>
        </FormButtonGroup>
      </template>
    </FormConsumer>
  </FormProvider>
</template>

<style lang="scss" scoped></style>

Step 1

Step 2

Step 3

JSON Schema Example

<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import {
  FormButtonGroup,
  FormItem,
  FormStep,
  Input,
  Submit,
} from '@silver-formily/element-plus'
import { createSchemaField, FormConsumer, FormProvider } from '@silver-formily/vue'
import { ElButton } from 'element-plus'

const { SchemaField } = createSchemaField({
  components: {
    FormItem,
    FormStep,
    Input,
  },
})

const schema = {
  type: 'object',
  properties: {
    collapse: {
      'type': 'void',
      'x-component': 'FormStep',
      'x-component-props': {
        formStep: '{{formStep}}',
        finishStatus: 'success',
      },
      'properties': {
        step1: {
          'type': 'void',
          'x-component': 'FormStep.StepPane',
          'x-component-props': {
            title: 'Step 1',
          },
          'properties': {
            aaa: {
              'type': 'string',
              'title': 'AAA',
              'required': true,
              'x-decorator': 'FormItem',
              'x-component': 'Input',
            },
          },
        },
        step2: {
          'type': 'void',
          'x-component': 'FormStep.StepPane',
          'x-component-props': {
            title: 'Step 2',
          },
          'properties': {
            bbb: {
              'type': 'string',
              'title': 'BBB',
              'required': true,
              'x-decorator': 'FormItem',
              'x-component': 'Input',
            },
          },
        },
        step3: {
          'type': 'void',
          'x-component': 'FormStep.StepPane',
          'x-component-props': {
            title: 'Step 3',
          },
          'properties': {
            ccc: {
              'type': 'string',
              'title': 'CCC',
              'required': true,
              'x-decorator': 'FormItem',
              'x-component': 'Input',
            },
          },
        },
      },
    },
  },
}
const form = createForm()
const formStep = FormStep.createFormStep()

async function log() {
  formStep.submit(console.log)
}
</script>

<template>
  <FormProvider :form="form">
    <SchemaField :schema="schema" :scope="{ formStep }" />
    <FormConsumer>
      <template #default>
        <FormButtonGroup>
          <ElButton
            :disabled="!formStep.allowBack"
            @click="
              () => {
                formStep.back()
              }
            "
          >
            Previous
          </ElButton>
          <ElButton
            :disabled="!formStep.allowNext"
            @click="
              () => {
                formStep.next()
              }
            "
          >
            Next
          </ElButton>
          <Submit :disabled="formStep.allowNext" @submit="log">
            Submit
          </Submit>
        </FormButtonGroup>
      </template>
    </FormConsumer>
  </FormProvider>
</template>

<style lang="scss" scoped></style>

Step 1

Step 2

Step 3

AAA:

API

FormStep

Prop	Type	Description	Default
`formStep`	`IFormStep`	Model instance created by `createFormStep`	-

For the rest, see https://element-plus.org/en-US/component/steps.html

FormStep.StepPane

See https://element-plus.org/en-US/component/steps.html

FormStep.createFormStep

interface createFormStep {
  (current?: number): IFormStep
}

interface IFormStep {
  // Current index
  current: number
  // Whether moving forward is allowed
  allowNext: boolean
  // Whether moving backward is allowed
  allowBack: boolean
  // Set the current index
  setCurrent: (key: number) => void
  // Submit the form
  submit: Formily.Core.Models.Form['submit']
  // Move forward
  next: () => void
  // Move backward
  back: () => void
}

FormStep ​

Markup Schema Example ​

JSON Schema Example ​

API ​

FormStep ​

FormStep.StepPane ​

FormStep.createFormStep ​

FormStep

Markup Schema Example

JSON Schema Example

API

FormStep

FormStep.StepPane

FormStep.createFormStep