# Form 表单容器

表单容器

## 代码演示

{{demo}}

## API

**Form**

| 属性        | 说明     | 类型               | 是否必须  | 默认值   |
| --------- | ------ | ---------------- | ----- | ----- |
| children | 子级元素 | BasicConfig[] | true | - |
| clearAfterSubmit | 提交之后清空表单 | boolean | false | false | 
| layout | 表单布局 | 'horizontal' ，'vertical'，'inline' | false | horizontal |
| validateFirst | 当某一规则校验不通过时，是否停止剩下的规则的校验 | boolean | false | false |

**FormItem**

| 属性        | 说明     | 类型               | 是否必须  | 默认值   |
| --------- | ------ | ---------------- | ----- | ----- |
| control | 控制的表单组件，只能放置一个组件 | BasicConfig | true | - |
| label | 表单描述文字 | string | false | - |
| labelCol | label 标签布局 | https://ant.design/components/grid-cn/#Col | false | {span: 4} |
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | https://ant.design/components/grid-cn/#Col | false | {span: 20}|
| rules | 使用内置的验证规则 | ValidateRules[] | false | [] | 
| filterRule | 使用ExpressionString来验证 | ExpressionString | false | - |
| filterErrMsg | 使用ExpressionString验证失败的错误信息 | ExpressString, String | false | - |
| apiRule.url | 请求地址| string | true | - |
| apiRule.method | 请求方法| string | false | GET|
| apiRule.data | 请求数据 | ExpressionString, Object | false | - |
| apiRule.validate | 使用ExpressionString， 验证接口返回值是否合格 | ExpressionString | true | - |
| apiRule.errmsg | 错误信息 | string,ExpressionString | false | - |
| feedback | 是否显示反馈 | boolean | false | true |
| required | 是否必填 | boolean | false | false |

**内置的验证规则**
```typescript
export interface ValidateRules {
    /**
     * 字段长度
     */
    len?: number;

    /**
     * 最大值
     */
    max?: number;

    /**
     * 最大长度
     */
    maxLength?: number;

    /**
     * 最小值
     */
    min?: number;

    /**
     * 最小长度
     */
    minLength?: number;

    /**
     * 校验文案
     */
    message?: string;

    /**
     * 正则表达式
     */
    pattern?: string;

    /**
     * 是否必须
     */
    required?: boolean;

    /**
     * 必须时，空格是否会被认为是错误
     */
    whitespace?: boolean;
}
```

## 事件

**Form**


| 事件名称        | 触发条件   | 参数   |
| ----------- | ------ | ---- |
| onSubmit     | 当表单提交   | $args，字段参数根据表单内定义的name字段来判别  |