Documents / @faasjs/ant-design / Form

Function: Form()

Call Signature

Form<Values>(props): Element

Render a data-aware Ant Design form without the built-in FaasJS submit handler.

The component normalizes initialValues with transferValue, renders item definitions through FormItem, and delegates submission to the custom onFinish handler.

Type Parameters

Values

Values extends Record<string, any> = any

Form values shape.

Parameters

props

FormWithoutFaasProps<Values>

Form props including items, submit behavior, and a custom onFinish handler.

Returns

Element

Example

import { Form } from '@faasjs/ant-design'

export function ProfileForm() {
  return (
    <Form
      items={[
        { id: 'name', required: true },
        { id: 'email', required: true },
      ]}
      onFinish={async (values) => {
        console.log(values)
      }}
    />
  )
}

Call Signature

Form<Path, Values>(props): Element

Render a data-aware Ant Design form with the built-in FaasJS write-action submit handler.

The component normalizes initialValues with transferValue, renders item definitions through FormItem, and submits via the built-in FaasJS request flow configured by faas. Use this overload for create/update/delete style submissions. For list/read flows, prefer Table, Description, FaasDataWrapper, or useFaas.

When Path is provided, the action and params in faas are strongly typed from the FaasActions type augmentation.

Type Parameters

Path

Path extends FaasActionPaths

Action path type inferred from faas.action for strong typing.

Values

Values extends Record<string, any> = any

Form values shape.

Parameters

props

FormWithFaasProps<Path, Values>

Form props including items, submit behavior, and FaasJS integration.

Returns

Element

Example

import { Form } from '@faasjs/ant-design'

declare module '@faasjs/types' {
  interface FaasActions {
    'user/create': {
      Params: { name: string; role: string }
      Data: { id: number }
    }
  }
}

export function CreateUserForm() {
  return (
    <Form<'user/create', { name: string; role: string }>
      initialValues={{ role: 'user' }}
      items={[
        { id: 'name', required: true },
        { id: 'role', options: ['user', 'admin'] },
      ]}
      faas={{
        action: 'user/create',
        params: (values) => ({
          role: values.role || 'user',
        }),
      }}
    />
  )
}

Call Signature

Form<Values, Path>(props): Element

Render a data-aware Ant Design form (catch-all overload for backward compatibility).

Type Parameters

Values

Values extends Record<string, any> = any

Path

Path extends FaasActionPaths = any

Parameters

props

FormProps<Values, Path>

Returns

Element