表单的事件

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

监听表单事件

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

组件监听方式

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

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

fApi 监听方式

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

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

事件类型

以下是 FormCreate 支持的主要事件类型及其详细说明：

change

• 类型：

  type change = (field:string, value:any,rule:Rule, api:Api, setFlag: boolean)=>void;

• 说明： 当表单组件的值在组件内部发生变化时触发。如果 setFlag 为 true，表示该变化是由外部手动修改引发的。

created

• 类型：

  type created = (api:Api)=>void;

• 说明： 在表单实例创建时触发，适合进行一些全局的初始设置。

mounted

• 类型：

  type mounted = (api:Api)=>void;

• 说明： 表单首次渲染完成后触发，通常用于初始化操作。

submit

• 类型：

  type submit = (formData:Object, api:Api)=>void;

• 说明： 当用户点击表单提交按钮时触发，或者通过调用 api.submit() 方法手动触发。

remove-field

• 类型：

  type removeField = (field:string, rule:Rule, api:Api)=>void;

• 说明：当表单中某个字段被移除时触发，用于执行清理或同步操作。

remove-rule

• 类型：

  type removeRule = (rule:Rule, api:Api)=>void;

• 说明：当某个规则从表单中移除时触发，适用于管理表单规则的动态变化。

repeat-field

• 类型：

  type repeatField = (rule:Rule, api:Api)=>void;

• 说明：当规则的 field 字段重复时触发，用于处理重复字段的情况。

emit-event

• 类型：

  type emitEvent = (emitName:string, ...args:any[])=>void;

• 说明： 在组件的 emit 事件被触发时触发，允许你监听并处理自定义事件。

control

• 类型：

  type control = (rule:Rule, api:Api)=>void;

• 说明： 当组件的 control 生效或失效时触发，适用于控制组件的显示逻辑。

reload

• 类型：

  type reload = (api:Api)=>void;

• 说明： 在表单重载后触发，用于执行重载后的初始化操作。

通过了解并使用这些事件，开发者可以更好地控制表单的行为和用户交互逻辑，从而打造出更复杂、更具响应性的表单应用。