How to Use Ant Design Form initialValue

Introduction

When working with Ant Design forms, the initialValue property allows you to set the initial value of a form field. This initial value can be used to prepopulate the form field with data or to show a default value when the form does not have any value.

Using initialValue in Ant Design Form

The initialValue property can be used with the getFieldDecorator method provided by Ant Design’s Form component. It allows you to set the initial value of a specific form field.

const Component = ({ id }) => {
  const { data } = useQuery(GET_NAME, {
    variables: { id },
    onCompleted: res => { form.setFieldsValue({ name: res.data.name }) }
  })

  return (
    <Form.Item>
      {form.getFieldDecorator('name', { initialValue: 'John' })(<Input />)}
    </Form.Item>
  )
}

In the above example, the initialValue is set to ‘John’ for the ‘name’ field. This will prepopulate the form field with the value ‘John’ when the form is rendered.

You can also set the initialValue dynamically based on the fetched data. For example:

const Component = ({ id }) => {
  const initialName = 'John'
  const { data } = useQuery(GET_NAME, { variables: { id } })
  if (data) { 
    initialName = data.name 
  }

  return (
    <Form.Item>
      {form.getFieldDecorator('name', { initialValue: initialName })(<Input />)}
    </Form.Item>
  )
}

In this case, the initialValue is set to the value of the ‘name’ field fetched from the server. If the data is available, the initialName will be set to the fetched value.

Setting initialValues in Ant Design Form

In addition to setting initialValue for individual form fields, you can also set initialValues for the entire form using the Form component. The initialValues property accepts an object containing the initial values for each form field.

<Form
  initialValues={{ username: 'default value' }}
  onFinish={onFinish}
  onFinishFailed={onFinishFailed}>
  <Form.Item
    label="Username"
    name="username"
    rules={[{ required: true, message: 'Please input your username!' }]}>
      <Input />
  </Form.Item>
</Form>

The example above demonstrates how to set the initialValues for a form field named ‘username’. The initial value will be set to ‘default value’. This is useful when you want to set default values for multiple form fields without specifying initialValue for each field separately.

Conclusion

The initialValue and initialValues properties in Ant Design forms provide a convenient way to set the initial values of form fields. Whether you want to prepopulate form fields with default values or render fetched data, these properties allow you to easily achieve both scenarios. Start using them in your Ant Design forms to enhance the user experience and streamline form input.

reference : 

reactjs