Home

Antd-dform

Simple form manager for antdesign
Explore the docs »

View Demo · Report Bug · Request Feature

About The Project

There are many great Form manager package available on GitHub, however, I didn't find one that really suit my needs so I created this enhanced one. I want to create a form manager package so amazing that it'll be the last one you ever need -- I think this is it.

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

• npm

  npm install antd-dform --save-dev
  

Installation

1. Import package

   import FormManager  from 'antd-dform';
   import {IField} from 'antd-dform/dist/interface'
   

Usage

1. Create instance and event inside your component

   
    const fields: IField[] = [
        {
            type: 'input',
            label: 'Simple input filed',
            name: 'field',
            required: true,
            placeholder : "Insert your name here"
        },
        // ... other field setting goes here
    ]
   
    export default (props : any) => {
   
        const default_form_data = {
            field : "hello world"
        }
   
        const form = React.createRef<FormInstance>();
   
        const onResetHandler = () => {
            form.current?.resetFields();
        }
   
        const onSubmitHandlerSuccess = () => {
            form.current?.validateFields()
            .then((values: any) => {
                // success form submit
            }, () => {
                // fail form submit
            }).finally(() => {
                // what ever
            })
        }
   
        return (
            <>
                <FormManager fields={fields} default={default_form_data} form={form} layout='vertical' />
                <Button onClick={onSubmitHandlerSuccess} type="primary">Submit</Button>
                <Button onClick={onResetHandler} >Reset</Button>
            <>
        )
    }
   

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Pham Viet Dung - dungpv.khtn@gmail.com

Project Link: https://github.com/phamvietdung/antd-dform