Ant Design Library has this component pre-built, and it is very easy to integrate as well. Form Component is used when the user needs to create an instance or collect information. We can use the following approach in ReactJS to use the Ant Design Form Component.
Form Props:
- colon: It is used to configure the default value of colon for Form.Item.
- component: It is used to set the Form rendering element.
- fields: It is used to denote the control of form fields through state management.
- form: It is used to denote the form control instance created by Form.useForm().
- initialValues: It is used to set value by Form initialization or reset.
- labelAlign: It is used to denote the text-align of the label of all items.
- labelCol: It is used to denote the Label layout, like <Col> component.
- layout: It is used to denote the form layout.
- name: It is used to denote the Form name.
- preserve: It is used to keep field value even when the field removed.
- requiredMark: It is used for the Required mark style.
- scrollToFirstError: It is used for the Auto scroll to the first failed field when submitting.
- size: It is used to set field component size.
- validateMessages: It is used for the Validation prompt template.
- validateTrigger: It is used to denote the config field validate trigger.
- wrapperCol: It is used to denote the layout for input controls.
- onFieldsChange: It is a callback function that is triggered when the field updated.
- onFinish: It is a callback function that is triggered after submitting the form and verifying data successfully.
- onFinishFailed: It is a callback function that is triggered after submitting the form and verifying data failed.
- onValuesChange: It is a callback function that is triggered when the value updated.
Form.Item Props:
- colon: It is used with label, whether to display color(:) after label text.
- dependencies: It is used to Set the dependency field.
- extra: It is used to denote the extra prompt message.
- getValueFromEvent: It is used to specify how to get value from the event or other onChange arguments.
- getValueProps: It is used to get the Additional props with subcomponent.
- hasFeedback: It is used with validate status and this option specifies the validation status icon.
- help: It is used to denote the prompt message.
- hidden: It is used to indicate whether to hide Form.Item or not.
- htmlFor: It is used to set sub-label htmlFor.
- initialValue: It is used to configure sub default value.
- label: It is used to denote the Label text.
- labelAlign: It is used to denote the text-align of the label.
- labelCol: It is used to denote the layout of the label.
- messageVariables: It is used to denote the default validate field info.
- name: It is used to denote the name.
- normalize: It is used to normalize value from the component value before passing to the Form instance.
- noStyle: It is used as a pure field control.
- preserve: It is used to keep field value even when the field removed.
- required: It is used to display the required style. and it is generated by the validation rule.
- rules: It is used to denote the rules for field validation.
- shouldUpdate: It is used for the custom field update logic.
- tooltip: It is used to configure tooltip info.
- trigger: It is used to indicate when to collect the value of the children node.
- validateFirst: It is used to indicate whether to stop validate on the first rule of error for this field.
- validateStatus: It is used to denote the validation status.
- validateTrigger: It is used to indicate when to validate the value of the children node.
- valuePropName: It is used to denote the props of the children node.
- wrapperCol: It is used to denote the layout for input controls.
Form.List Props:
- children: It is a render function.
- initialValue: It is used to denote a config sub default value.
- name: It is used to denote the field name.
- rules: It is used for the validation rules.
Form.ErrorList Props:
- errors: It is used to denote the error list.
Form.Provider Props:
- onFormChange: It is a callback function that is triggered when a subform field updates function.
- onFormFinish: It is a callback function that is triggered when a subform submits.
Creating React Application And Installing Module:
-
Step 1: Create a React application using the following command:
npx create-react-app foldername
-
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
-
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install antd
Project Structure: It will look like the following.
Project Structure
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
App.js
import React from 'react'
import "antd/dist/antd.css";
import { Form, Button, Input } from 'antd';
export default function App() {
return (
<div style={{
display: 'block', width: 700, padding: 30
}}>
<h4>ReactJS Ant-Design Form Component</h4>
<Form
name="basicform"
onFinishFailed={() => alert('Failed to submit')}
onFinish={() => alert('Form Submitted')}
initialValues={{ remember: true }}
>
<Form.Item
label="Enter username"
name="Username"
rules={[{ required: true, message: 'Please enter username' }]}
>
<Input />
</Form.Item>
<Form.Item>
<Button type="success" htmlType="submit">
Submit Username
</Button>
</Form.Item>
</Form>
</div>
);
} |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Reference: https://ant.design/components/form/