Schema-form-g NPM

schema-form-g

Automatic form generation by schema based on antd with React

Screenshot

Demo

online example: https://favori.gitee.io/gantd-landing (CodePen)

install

Feature

Build forms quickly
Style control by uiSchema
Support read and write separation
Built-in base field component type
Support for adding custom components

Usage

import React, { useState, useRef } from 'react';
import AutoReload from 'auto-load-g';

const initalUiSchema = {
    "form:gutter":10,
    "field:col":12,
    "field:style":{
        padding:0
    },
    "field:labelAlign":'left',
    "field:labelCol":6,
    "field:wrapperCol":18

}

const schema = {
    type: "object",
    title: "普通表单",
    required:['key_1'],
    propertyType: {
        key_1: {
            title: "普通输入框",
            type: "string",
        },
        key_2: {
            title: "数字输入框",
            type: "number",
            componentType: "InputNumber"
        },
        key_3: {
            title: "金额",
            type: "string",
            componentType: "InputMoney"
        },
        key_4: {
            title: "url地址",
            type: "string",
            componentType: "Url"
        },
        key_5: {
            title: "邮箱",
            type: "string",
            componentType: "Email"
        },
        key_6: {
            title: "语言",
            type: "string",
            componentType: "Language"
        },
        key_7: {
            title: "手机号",
            type: "string",
            componentType: "CellPhone"
        },
    }
}


function BasicUse() {
   const [edit, setEdit] = useState(EditStatus.EDIT)
    const formRef = useRef(null)

    const onSubmit = async () => {
        if (!formRef.current) return
        const { errors, values: formValues } = await formRef.current.validateForm()
        console.log('formValues', formValues)
    }
    return <div style={{ margin: 10 }}>
        <SchemaForm
            wrappedComponentRef={formRef}
            edit={edit}
            schema={schema}
            uiSchema={initalUiSchema}
        />
        <div style={{ float: 'right' }}>
            <Button type='primary' onClick={onSubmit}>submit</Button>
        </div>
    </div>
}

React.render(<BasicUse/>, mountNode);