We want to build forms quickly, but we have to write validation, bind data, and so on, which is often a hassle.

We want the code to be able to implement the basic requirements of a form

👇

[{type: 'input', title: 'Your name', width: '331px' },
        {type: 'input', title: 'Your mobile phone number', width: '331px', pattern: /^1{1}\d{10}$/, message: 'Please enter the correct mobile phone number'},
        {type: 'radios', title: 'Educational Background', data: ['Below junior College'.'specialist'],},... {type: 'input', textArea: true, title: 'Questions you would like your teacher to help you with', rows: 4, required: false},]Copy the code

Generate a simple form based on the data structure, write a callback function, and request the background.

I wrote a simple code wrapper based on ANTD, using the following example

Using the example

const [formloading, setformloading] = useState(false)
    const [formJSON] = useState<typeFormJSON>([
        {type: 'input', title: 'Your name', width: '331px' },
        {type: 'input', title: 'Your mobile phone number', width: '331px', pattern: /^1{1}\d{10}$/, message: 'Please enter the correct mobile phone number'},
        {type: 'radios', title: 'Educational Background', data: ['Below junior College'.'specialist'],},... {type: 'input', textArea: true, title: 'Questions you would like your teacher to help you with', rows: 4, required: false},
    ])
    const onFinish = async (value: any) => {
        setformloading(true)
        console.log(value)
        // await Axios.post('[web]/xx', value)
        setformloading(false// TODO successfully processed}return <div>
        <div>
            <Form onFinish={onFinish}>
                <JSONToForm json={formJSON} />
                <Form.Item>
                    <Button type="primary" htmlType="submit"Loading ={formloading} className={styles.button}> Commit information </ button > </Form> </Form> </div> </div>Copy the code

How to implement

As you can see, there’s a JSONToForm component here, and that’s all we need to implement. My implementation component code

import React from 'react'

import {Form, Radio, Button, Input} from 'antd'
import TextArea from 'antd/lib/input/TextArea'

interface typeFormJSONInput {
    type: 'input'; // Display title: string; // Is this mandatory/mandatory, by default mandatory/mandatory required? : boolean; // Set the width, default 100% width? : string; // Is it a text field, default no textArea? : boolean; // Text field rows rows? : number; / / regular pattern? : RegExp; // Custom message default: please type +title message? : string; } interfacetypeFormJSONRadios {
    type: 'radios'; // Display title: string; // Array data: string[]; // Is this mandatory/mandatory, by default mandatory/mandatory required? : boolean; }export type typeFormJSON = (typeFormJSONInput | (typeFormJSONRadios))[]

export function JSONToForm({json}: {json: typeFormJSON}){
    return <div>
        {json.map(row => 
            row.type == 'radios' ? <Form.Item label={row.title} name={row.title} rules={[{
                required: row.required !== void 0 ? row.required : true, message: 'Please select${row.title}`
            }]}>
                <Radio.Group onChange={(e) => console.log(e)} value={row.title}>
                    {row.data.map(dateItem => <Radio value={dateItem}>{dateItem}</Radio>)}
                </Radio.Group>
            </Form.Item> :
                row.type == 'input' ? <Form.Item label={row.title} name={row.title} rules={[{
                    required: row.required !== void 0 ? row.required : true, the pattern: row. The pattern, the message: row. The message | | ` please input${row.title}` }]}> {row.textArea ? <TextArea rows={row.rows} value={row.title} placeholder={' Please enter${row.title}'} /> : <Input style={{width: row.width}} value={row.title} placeholder={${row.title}`} />}
            </Form.Item> :
            <></>
        )}
    </div>
}
Copy the code

Here we use ANTD to do the main rendering of the form, and then all we need to do is change it to json rendering.

The effect

Click to get the value

And then pass this json to the background, the background management system display, and then Object. Kes rendering.

– the –