## 基本使用

使用formGroup组件，就可以让表单元素按照规整的布局进行排版。

```json
{
    "body": [
        {
            "type": "container",
            "model": "form",
            "dataCustomer": {
                "customers": [{
                    "mode": "submit",
                    "name": "submitForm",
                    "config": {
                        "url": "/api/mock/submit",
                        "method": "GET",
                        "data": "#ES{$trigger.submitForm}"
                    }
                }]
            },
            "data": {
                "username": "andycallandycal"
            },
            "children": [
                {
                    "type": "form",
                    "name": "basicForm",
                    "clearAfterSubmit": true,
                    "trigger": [
                        {
                            "event": "onSubmit",
                            "debug": true,
                            "targetCustomer": "submitForm",
                            "params": {
                                "username": "#ES{$args.username}"
                            }
                        }
                    ],
                    "children": [
                        {
                            "type": "formItem",
                            "label": "姓名",
                            "required": true,
                            "rules": [{
                                "maxLength": 20,
                                "message": "长度不能超过20个字符"
                            }, {
                                "required": true,
                                "message": "姓名是必填属性"
                            }],
                            "control": {
                                "type": "input",
                                "name": "username",
                                "placeholder": "请输入姓名"
                            },
                            "extra": "Extra Text"
                        },
                        {
                            "type": "formItem",
                            "wrapperCol": {
                                "offset": 4
                            },
                            "control": {
                                "type": "button",
                                "htmlType": "submit",
                                "buttonType": "primary",
                                "text": "提交",
                                "disabled": "#ES{!$form.valid}"
                            }
                        },
                        {
                            "type": "row",
                            "children": [
                                {
                                    "type": "text",
                                    "text": "只有在Form组件内部才能使用$form，$form能查看整个表单内所有元素的状态"
                                }
                            ]
                        },
                        {
                            "type": "row",
                            "children": [
                                {
                                    "type": "text",
                                    "text": "表单是否可提交: #ES{$form.valid}"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}
```