Skip to main content

扩展组件充当表单字段

扩展组件可以充当为表单字段,配置充当字段属性后,会自动为表单添加该字段,无需再次手动添加。

配置了充当字段的扩展组件,可在挂载函数中获得额外接口 fieldApi

  • setValue: 用于设置字段值
  • setTouched: 用于设置字段是否被用户操作过,从而触发校验
  • id: 字段 id,即配置的充当字段 ID
  • name: 字段 name,即配置的充当字段名称
  • defaultValue: 字段默认值,即配置的充当字段名称
interface FieldApi<T> {
// set field value
setValue: (value: T) => void;
// set field touched, which will trigger validation
setTouched: () => void;
// field id
id: string;
// field name
name: string;
// field default value
defaultValue: T;
}

配置了充当字段的扩展组件,可在挂载函数的返回对象中定义额外暴露给外部的方法 updateValue validate

  • updateValue: 供外部调用修改内部值。例如表单联动场景、重置表单数据场景。
  • validate: 验证字段值,返回 true 表示验证通过,返回 false 表示验证失败并显示一个通用的验证失败提示,抛异常也表示验证失败并显示该异常作为验证失败提示。
interface Handle<T> {
// The alternative way to define the unmount function
unmount?: UnmountFunction;
// External method for updating field parameters, used when parameters may change
updateParams?(params: Params): void;
// External method for updating field value (controlled component), if this extension acts as a field
updateValue?(value: T): void;
// External method for validating field value, if this extension acts as a field. Throw an error to indicate validation error.
validate?(value: T): boolean;
}