Module: Form

Properties:

Name	Type	Description
props	Object	组件属性，内容如下 Properties Name Type Description colon String 标签后面的冒号，默认值为空 inline Boolean 标签和控件是否同行 alignItems String 标签和控件的对齐方式，默认值：items-center。 可选值：items-start,items-center,items-end labelWidth String | Boolean 标签的宽度，默认值：80 labelClassName String 标签的样式类名 labelDisplay String 标签是否显示 colspan Number 子组件FormItem占位 disabled Boolean 子组件disabled属性 className String 表单的样式类目 gap Number 表单控件之间的间隙，取值范围4~10，默认值6 fields Array 表单的控件配置集合 data Object 表单的值 errors Object 表单验证的错误 onChange function 表单值改变事件 onSubmit function 表单提交事件

Examples

组件引入

// 全局模块引入
import { Form } from '@ccreator/smart-ui';
// 最小化模块引入
import Form from '@ccreator/smart-ui/dist/Form';

表单示例（使用children输出内容）

 <Form labelWidth={100} colon="：">
    <h3>新增</h3>
    <FormItem label="名称">
        <div className="input-group">
            <input
                type="text"
                className="input_text"
                placeholder=""
                value={form.name || ''}
                onChange={(event) => {
                    setForm({ ...form, name: event.target.value });
                }}
            />
        </div>
    </FormItem>
    <FormItem label="状态">
        <div className="select-group">
            <select
                className="select"
                value={form.status || ''}
                onChange={(event) => {
                    setForm({ ...form, status: event.target.value });
                }}
            >
                <option value="1">启用</option>
                <option value="0">禁用</option>
            </select>
        </div>
    </FormItem>
    <FormItem label="备注" colspan={2}>
        <div className="textarea-group">
            <textarea
                className="textarea_text"
                style={{ height: 80 }}
                value={form.comment}
                onChange={(event) => {
                    setForm({ ...form, comment: event.target.value });
                }}
            />
        </div>
    </FormItem>
    <FormItem colspan={2}>
        <Button
            className="btn-primary me-2"
            label="保存"
            onClick={async () => {
                ... ...
            }}
        />
        <Button
            className="btn-default"
            label="取消"
            onClick={() => actions.app.routeReplace('/design')}
        />
    </FormItem>
</Form>

表单和校验（使用fields属性配置输出内容，建议使用此模式）

// FormReport.jsx

import React from 'react';
import { Form, FormItem, Button, FormUtil } from '@ccreator/smart-ui';
import fields from './fields';

const FormReport = () => {

    const [form, setForm] = React.useState(FormUtil.values(fields));

    return (
        <Form
            labelWidth={120}
            fields={fields}
            data={form}
            onChange={setForm}
        >
            <FormItem colspan={3}>
                <Button type="submit" label="保存" />
            </FormItem>
        </Form>
    );
};

export default FormReport;

动态修改表单的字段

// FormReport.jsx

import React from 'react';
import { Form, FormItem, Button, FormUtil } from '@ccreator/smart-ui';
import fields from './fields';

const FormReport = () => {

    const [fieldList, setFieldList] = React.useState(fields);
    const [form, setForm] = React.useState(FormUtil.values(fields));

    return (
        <Form
            labelWidth={120}
            fields={fieldList}
            data={form}
            onChange={(values, name, value) => {
                if (name === 'status' && value === '0') {
                    fieldList.shift();
                    setFieldList(fieldList);
                }
                setForm(values);
            }}
            onSubmit={handleSubmit}
        >
            <FormItem colspan={3}>
                <Button type="submit" label="保存" />
            </FormItem>
        </Form>
    );
};

export default FormReport;

字段配置示例

// fields.js

import React from 'react';
import { Validate } from '@ccreator/smart-ui';

const fields = [
    {
        name: 'name',
        label: '名称',
        Component: React.lazy(() => import('@ccreator/smart-ui/dist/Input')),
        placeholder: '请输入名称',
        required: true,
    },
    {
        name: 'options.layout',
        label: '布局列',
        Component: React.lazy(() => import('@ccreator/smart-ui/dist/Select')),
        options: [
            { value: '1', text: '横向展示' },
            { value: '2', text: '纵向展示' },
        ],
        value: '1',
    },
    {
        name: 'status',
        label: '状态',
        Component: React.lazy(() => import('@ccreator/smart-ui/dist/Select')),
        options: [
            { value: '1', text: '启用' },
            { value: '0', text: '禁用' },
        ],
        value: '1',
    },
    {
        name: 'sequence',
        label: '显示顺序',
        Component: React.lazy(() => import('@ccreator/smart-ui/dist/Input')),
        value: '1',
        // 数字类型的校验
        required: true,
        validate: Validate.number().min(10).max(100),
    },
    {
        name: 'sql',
        label: 'SQL语句',
        // 使用自定义的组件
        Component: React.lazy(() => import('./SQLEditor')),
        required: true,
        height: 180,
        colspan: 12,
        labelClassName: 'self-start text-right pt-2',
        onExecuteSQL: () => {
            actions.design.executeSQL();
        },
    },
];

export default fields;