表单的事件(events)

在使用 FormCreate 生成表单时，了解如何处理各种事件是构建动态表单的重要步骤。本节将详细介绍如何通过组件和 api 监听和处理表单事件，确保你能灵活控制表单的交互行为。

监听表单事件

FormCreate 提供了两种方式来监听表单事件：通过组件直接监听和通过 api 监听。

组件监听方式

你可以在模板中直接使用 v-on 或简写的 @ 语法来监听事件。

html

<form-create @change="onChange"></form-create>

api 监听方式

你也可以通过 api 对象来监听事件，这种方式更适合在逻辑层面集中管理事件处理。

api.on('change',this.onChange);

事件名	类型	触发时机
change	`(field: string, value: any, rule: Rule, api: Api, setFlag: boolean) => void`	表单字段值变化时触发（用户输入或代码调用 `api.setValue`）。`setFlag=true` 表示由代码触发。
created	`(api: Api) => void`	表单实例创建完成，但未渲染 DOM。
mounted	`(api: Api) => void`	表单首次渲染完成（DOM 挂载后）。
reload	`(api: Api) => void`	调用 `api.reload()` 方法重载表单后。
submit	`(formData: Object, api: Api) => void`	点击提交按钮或调用 `api.submit()`。
remove-field	`(field: string, rule: Rule, api: Api) => void`	调用 `api.removeField(field)` 移除字段时。
remove-rule	`(rule: Rule, api: Api) => void`	调用 `api.removeRule(rule)` 移除规则时。
repeat-field	`(rule: Rule, api: Api) => void`	添加规则时检测到 `field` 重复。
emit-event	`(emitName: string, ...args: any[]) => void`	组件内触发 `emit` 事件（如自定义组件的 `@change`）。
validate-fail	`(e, api: Api) => void`	表单验证未通过时触发。
control	`(rule: Rule, api: Api) => void`	规则中 `control` 属性控制的显示/隐藏状态变化时。

通过 submit 事件监听表单提交事件

商品名称为空时点击提交，会触发 validate-fail。

通过 mounted 事件监听表单创建完成事件。表单渲染后会禁用商品名称。