formfusion NPM Version
LearnBlogPlayground

Integration with Ant Design

Integrating FormFusion with Ant Design is a straightforward process. To accomplish this, you can use the connect method along with the UseForm hook to initialize your form's configuration.


For a successful implementation of the connect method, you'll need access to the form configuration object and to select the input type or validation pattern that aligns with your requirements.


Important Note: To leverage the potential of the connect method, it's important to call it on the lower-level input component rendered by Ant Design. This ensures the synchronization of FormFusion with the Ant Design framework.

Example

import { Input, Space, Button, Typography } from 'antd';
import { Form, useForm, connect } from 'formfusion';

const { Text } = Typography;

const MyForm = () => {
  const config = useForm({
    onSubmit: (e) => {
      console.log('Success ' + JSON.stringify(e));
    },
    validateOnChange: true,
  });

  return (
    <Form config={config}>
      <Space direction="vertical" style={{ width: '100%' }}>
        <Input
          {...connect(config, 'alphabetic')}
          id="firstName"
          name="firstName"
          label="First name"
          status={config.errors.firstName ? 'error' : ''}
          placeholder="Enter your first name"
        />
      </Space>
      <Text type="danger">{config.errors.firstName}</Text>
      <Space direction="vertical" style={{ width: '100%', marginTop: '15px' }}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Space>
    </Form>
  );
};

export default MyForm;