Working with Antd Form

Antd have built in form management and support complex usage. It might seem overwhelming and hard to work with it for beginner or antd first time user. Here are some notes I tried to collect for my own future reference.

Preparations / Basics

Wrap the whole form with Form component.
Create form hook through Form.useForm:

const [form] = Form.useForm()

Make sure to wrap each fields with Form.Item and define name (similar concept like react-hook-form or formik).

Things to Aware with Form

Attach form state to Form.
Define initialValues with state / immutable, not normal object. Why? Turns out anything passed to initialValues is prone to be unstable / becomes mutable. I tried to work around it with making sure passing state into it as state is immutable. This must be awared especially after switching back and forth between pages.
Form provide onFinish that will only be triggered when submit and validation is success.
Form provide onFailure that will be triggered when submit and validation is not passing.
Form.Item provide rules to define field validation.
Form initialValues will only work or mapped to Form.Item or Form.List. If there’s an attribute which doesn’t shown / rendered using Form.Item / Form.List, it won’t be mapped / assigned.
To make attribute still exist but the UI hidden, don’t use null render. Use style.display: 'none'

Form Submit

For submit button which are not a descendant of the form:

define id in Form
define form in the submit button with the value same as id being defined in Form

examples:

const FORM_KEY = 'form_id';
 
...
 
   <Form
    form={form}
    id={FORM_KEY}
    ...
   >
      ...
   </Form>
 
   ...
 
   <Button
    htmlType="submit"
    form={FORM_KEY}
   >
      Submit
   </Button>

const FORM_KEY = 'form_id';
 
...
 
   <Form
    form={form}
    id={FORM_KEY}
    ...
   >
      ...
   </Form>
 
   ...
 
   <PopConfirm
    okButtonProps={{ htmlType: 'submit', form: FORM_KEY }}
   >
    <Button>Submit</Button>
   </PopConfirm>

Actually, it’s a web standard 😄 References:

Things to Aware with Inputs

Input, Select, NumberInput

For general purpose inputs, use Input component.
For numeric inputs and expecting form state to also receive number, use NumberInput component.
For formatted number input, use NumericInput of react-number-format and set customInput prop as Input.
For switch toggle input, use valuePropName="checked" on the Form.Item wrapper of the switch.

Working with Array fields

Form.List can be used for array property / attribute of the form shape.
Form.List provide render function children: (fields, { add, remove, move }) => React.ReactNode
We can combine Form.List with Table and pass fields as Table’s dataSource.

Useful References

Misc Table