fix(FormItem): append a trigger field to the rule type (#5439)

components/form/Form.tsx

@@ -13,7 +13,6 @@ import isEqual from 'lodash-es/isEqual';
 import type { Options } from 'scroll-into-view-if-needed';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
-import type { VueNode } from '../_util/type';
 import { tuple } from '../_util/type';
 import type { ColProps } from '../grid/Col';
 import type {
@@ -24,6 +23,7 @@ import type {
   ValidateOptions,
   Callbacks,
   ValidateMessages,
+  Rule,
 } from './interface';
 import { useInjectSize } from '../_util/hooks/useSize';
 import useConfigInject from '../_util/hooks/useConfigInject';
@@ -34,32 +34,8 @@ import useForm from './useForm';
 export type RequiredMark = boolean | 'optional';
 export type FormLayout = 'horizontal' | 'inline' | 'vertical';
 
-export type ValidationRule = {
+/** @deprecated Will warning in future branch. Pls use `Rule` instead. */
-  /** validation error message */
+export type ValidationRule = Rule;
-  message?: VueNode;
-  /** built-in validation type, available options: https://github.com/yiminghe/async-validator#type */
-  type?: string;
-  /** indicates whether field is required */
-  required?: boolean;
-  /** treat required fields that only contain whitespace as errors */
-  whitespace?: boolean;
-  /** validate the exact length of a field */
-  len?: number;
-  /** validate the min length of a field */
-  min?: number;
-  /** validate the max length of a field */
-  max?: number;
-  /** validate the value from a list of possible values */
-  enum?: string | string[];
-  /** validate from a regular expression */
-  pattern?: RegExp;
-  /** transform a value before validation */
-  transform?: (value: any) => any;
-  /** custom validate function (Note: callback must be called) */
-  validator?: (rule: any, value: any, callback: any, source?: any, options?: any) => any;
-
-  trigger?: string;
-};
 
 export const formProps = () => ({
   layout: PropTypes.oneOf(tuple('horizontal', 'inline', 'vertical')),
@@ -73,7 +49,7 @@ export const formProps = () => ({
   /** @deprecated Will warning in future branch. Pls use `requiredMark` instead. */
   hideRequiredMark: { type: Boolean, default: undefined },
   model: PropTypes.object,
-  rules: { type: Object as PropType<{ [k: string]: ValidationRule[] | ValidationRule }> },
+  rules: { type: Object as PropType<{ [k: string]: Rule[] | Rule }> },
   validateMessages: {
     type: Object as PropType<ValidateMessages>,
     default: undefined as ValidateMessages,

components/form/interface.ts

@@ -52,24 +52,36 @@ type Validator = (
 export interface ValidatorRule {
   warningOnly?: boolean;
   message?: string | VueNode;
+  /** custom validate function (Note: callback must be called) */
   validator: Validator;
 }
 
 interface BaseRule {
   warningOnly?: boolean;
+  /** validate the value from a list of possible values */
   enum?: StoreValue[];
+  /** validate the exact length of a field */
   len?: number;
+  /** validate the max length of a field */
   max?: number;
+  /** validation error message */
   message?: string | VueNode;
+  /** validate the min length of a field */
   min?: number;
+  /** validate from a regular expression */
   pattern?: RegExp;
+  /** indicates whether field is required */
   required?: boolean;
+  /** transform a value before validation */
   transform?: (value: StoreValue) => StoreValue;
+  /** built-in validation type, available options: https://github.com/yiminghe/async-validator#type */
   type?: RuleType;
+  /** treat required fields that only contain whitespace as errors */
   whitespace?: boolean;
-
   /** Customize rule level `validateTrigger`. Must be subset of Field `validateTrigger` */
   validateTrigger?: string | string[];
+  /** Check trigger timing */
+  trigger?: 'blur' | 'change' | ['change', 'blur'];
 }
 
 type AggregationRule = BaseRule & Partial<ValidatorRule>;