form.d.ts 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  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. updateRules(rules: Rules): void;
  75. /**
  76. * 设置 rules
  77. * @param rules
  78. */
  79. private setRules;
  80. /**
  81. * 添加表单对象
  82. * @param ref 表单ref对象
  83. */
  84. addItem(ref: FromItemRef, customName?: string): void;
  85. /**
  86. * 设置表单值
  87. * @param name 表单名称
  88. * @param value 表单初始值
  89. */
  90. setFieldValue(name: string, value: Value): void;
  91. /**
  92. * 设置表单值
  93. * @param name 表单名称
  94. * @param value 表单初始值
  95. */
  96. setFieldsValue(values: Values): void;
  97. /**
  98. * 设置 initialValues,这个操作不会对页面进行修改,要是需要重置表单可跟上 reset 方法;
  99. * 这样是对于表单已经在编辑,但是需要重新initialValues的场景
  100. *
  101. * eg:
  102. * this.setInitialValues(initialValues);
  103. * this.reset();
  104. *
  105. * @param initialValues
  106. */
  107. setInitialValues(initialValues: Values): void;
  108. /**
  109. * 获取对应字段名的值
  110. * @param name
  111. * @returns
  112. */
  113. getFieldValue(name: string): any;
  114. /**
  115. * 获取一组字段名对应的值
  116. * @param nameList
  117. * @returns
  118. */
  119. getFieldsValue(nameList?: string[]): Values;
  120. /**
  121. * 获取对应字段名的校验器状态
  122. * @param name
  123. * @returns
  124. */
  125. getFieldValidatorStatus(name: string): ValidatorStatus;
  126. /**
  127. * 获取一组字段名的校验器状态
  128. * @param nameList
  129. * @returns
  130. */
  131. getFieldsValidatorStatus(nameList?: string[]): Record<string, ValidatorStatus>;
  132. /**
  133. * 设置对应字段名的校验器状态
  134. * @param name 表单名称
  135. * @param validatorStatus 校验状态
  136. * @returns
  137. */
  138. setFieldValidatorStatus(name: string, validatorStatus: ValidatorStatus): void;
  139. /**
  140. * 设置一组字段名的校验器状态
  141. * @param fieldsValidatorStatus 表单校验状态
  142. * @returns
  143. */
  144. setFieldsValidatorStatus(fieldsValidatorStatus: Record<string, ValidatorStatus>): void;
  145. /**
  146. * 检查对应字段是否被用户操作过
  147. * @param name 字段名称
  148. * @returns
  149. */
  150. isFieldTouched(name: string): boolean;
  151. /**
  152. * 指定表单字段值更新时触发回调方法
  153. * @param name 表单字段名称
  154. * @param callback 回调方法
  155. */
  156. onValueChange(name: string, callback: (value: Value, allValues: Values) => void): void;
  157. /**
  158. * 表单字段值更新时触发回调方法
  159. * @param name 表单字段名称
  160. * @param callback 回调方法
  161. */
  162. onValuesChange(callback: (changedValues: Values, allValues: Values) => void): void;
  163. /**
  164. * 表单提交
  165. */
  166. submit(): Promise<Values>;
  167. /**
  168. * 表单重置
  169. */
  170. reset(): void;
  171. }
  172. export declare function createForm({ methods }?: {
  173. methods?: {};
  174. }): IMixin4Legacy<{
  175. formData: {
  176. value: Value;
  177. } & ValidatorStatus;
  178. }, Record<string, any>, {
  179. emit(trigger: EventTrigger, value?: Value): void;
  180. setFormData(values: Values): void;
  181. getFormData(): {
  182. value: Value;
  183. } & ValidatorStatus;
  184. on(callback: (trigger: EventTrigger, value?: Value) => void): void;
  185. getProps: Record<string, any>;
  186. }, MiniProgram.UnknownRecord, MiniProgram.UnknownRecord>;