form.d.ts 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. /// <reference types="@mini-types/global" />
  2. import { InternalRuleItem, Value, Values, RuleItem, ValidateMessages } from 'async-validator';
  3. import { IMixin4Legacy } from '@mini-types/alipay';
  4. export { Value, Values };
  5. export type Validator = (rule: Omit<InternalRuleItem, 'validator' | 'asyncValidator'>, value: Value) => void | Promise<void>;
  6. export type ValidatorRender = (form: Form) => {
  7. validator: Validator;
  8. };
  9. export type FormRuleItem = Omit<RuleItem, 'asyncValidator'> | ValidatorRender;
  10. export type Rule = FormRuleItem | FormRuleItem[];
  11. export type Rules = Record<string, Rule>;
  12. export type FormConfig = {
  13. rules?: Rules;
  14. initialValues?: Values;
  15. validateMessages?: ValidateMessages;
  16. };
  17. export type ValidateStatus = 'default' | 'success' | 'error' | 'validating';
  18. export interface ValidatorStatus {
  19. status: ValidateStatus;
  20. errors: string[];
  21. }
  22. export interface FromItemRef {
  23. setFormData: (values: Values) => void;
  24. getFormData: () => Values;
  25. getProps: () => Record<string, Value>;
  26. on: (callback: (trigger: EventTrigger, value?: Value) => void) => void;
  27. }
  28. export type ValidateTrigger = 'onChange' | 'onBlur' | 'onFocus';
  29. export type EventTrigger = ValidateTrigger | 'didUnmount' | 'deriveDataFromProps';
  30. export declare class Form {
  31. /**
  32. * 表单初始值
  33. */
  34. private initialValues;
  35. /**
  36. * 原始规则,用户传入的跟之前的规则区别在于validator
  37. */
  38. private rules;
  39. /**
  40. * 表单ref组件对象
  41. */
  42. private fields;
  43. /**
  44. * 验证提示模板
  45. */
  46. private validateMessages;
  47. /**
  48. * 表单字段 change侦听
  49. */
  50. private changeListeners;
  51. /**
  52. * 依赖表
  53. */
  54. private dependenciesMap;
  55. /**
  56. * Form构建
  57. * @param formConfig 表单配置项
  58. */
  59. constructor(formConfig?: FormConfig);
  60. /**
  61. * 用户传入的rules转换成async-validator rules
  62. * @param rules 校验规则
  63. */
  64. private transformRules;
  65. /**
  66. * 遍历表单field对象
  67. * @param callback
  68. */
  69. private eachField;
  70. /**
  71. * 设置 rules
  72. * @param rules
  73. */
  74. private setRules;
  75. /**
  76. * 添加表单对象
  77. * @param ref 表单ref对象
  78. */
  79. addItem(ref: FromItemRef, customName?: string): void;
  80. /**
  81. * 设置表单值
  82. * @param name 表单名称
  83. * @param value 表单初始值
  84. */
  85. setFieldValue(name: string, value: Value): void;
  86. /**
  87. * 设置表单值
  88. * @param name 表单名称
  89. * @param value 表单初始值
  90. */
  91. setFieldsValue(values: Values): void;
  92. /**
  93. * 设置 initialValues,这个操作不会对页面进行修改,要是需要重置表单可跟上 reset 方法;
  94. * 这样是对于表单已经在编辑,但是需要重新initialValues的场景
  95. *
  96. * eg:
  97. * this.setInitialValues(initialValues);
  98. * this.reset();
  99. *
  100. * @param initialValues
  101. */
  102. setInitialValues(initialValues: Values): void;
  103. /**
  104. * 获取对应字段名的值
  105. * @param name
  106. * @returns
  107. */
  108. getFieldValue(name: string): any;
  109. /**
  110. * 获取一组字段名对应的值
  111. * @param nameList
  112. * @returns
  113. */
  114. getFieldsValue(nameList?: string[]): Values;
  115. /**
  116. * 获取对应字段名的校验器状态
  117. * @param name
  118. * @returns
  119. */
  120. getFieldValidatorStatus(name: string): ValidatorStatus;
  121. /**
  122. * 获取一组字段名的校验器状态
  123. * @param nameList
  124. * @returns
  125. */
  126. getFieldsValidatorStatus(nameList?: string[]): Record<string, ValidatorStatus>;
  127. /**
  128. * 设置对应字段名的校验器状态
  129. * @param name 表单名称
  130. * @param validatorStatus 校验状态
  131. * @returns
  132. */
  133. setFieldValidatorStatus(name: string, validatorStatus: ValidatorStatus): void;
  134. /**
  135. * 设置一组字段名的校验器状态
  136. * @param fieldsValidatorStatus 表单校验状态
  137. * @returns
  138. */
  139. setFieldsValidatorStatus(fieldsValidatorStatus: Record<string, ValidatorStatus>): void;
  140. /**
  141. * 检查对应字段是否被用户操作过
  142. * @param name 字段名称
  143. * @returns
  144. */
  145. isFieldTouched(name: string): boolean;
  146. /**
  147. * 指定表单字段值更新时触发回调方法
  148. * @param name 表单字段名称
  149. * @param callback 回调方法
  150. */
  151. onValueChange(name: string, callback: (value: Value, allValues: Values) => void): void;
  152. /**
  153. * 表单字段值更新时触发回调方法
  154. * @param name 表单字段名称
  155. * @param callback 回调方法
  156. */
  157. onValuesChange(callback: (changedValues: Values, allValues: Values) => void): void;
  158. /**
  159. * 表单提交
  160. */
  161. submit(): Promise<Values>;
  162. /**
  163. * 表单重置
  164. */
  165. reset(): void;
  166. }
  167. export declare function createForm({ methods }?: {
  168. methods?: {};
  169. }): IMixin4Legacy<{
  170. formData: {
  171. value: Value;
  172. } & ValidatorStatus;
  173. }, Record<string, any>, {
  174. emit(trigger: EventTrigger, value?: Value): void;
  175. setFormData(values: Values): void;
  176. getFormData(): {
  177. value: Value;
  178. } & ValidatorStatus;
  179. on(callback: (trigger: EventTrigger, value?: Value) => void): void;
  180. getProps: Record<string, any>;
  181. }, MiniProgram.UnknownRecord, MiniProgram.UnknownRecord>;