feat: support groupId and ignore rule

react-component · May 17, 2023 · 7aed5b3 · 7aed5b3
1 parent ffd4b68
commit 7aed5b3
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 6 deletions.
diff --git a/docs/examples/validate.tsx b/docs/examples/validate.tsx
@@ -50,7 +50,7 @@ export default () => {
 
           return (
             <React.Fragment>
-              <Field name="username" rules={[{ required: true }]}>
+              <Field name="username" rules={[{ required: true, groupId: 'GroupA', id: '1' }]}>
                 <Input
                   placeholder="Username"
                   onChange={({ target: { value } }) => {
@@ -64,8 +64,10 @@ export default () => {
               <Field
                 name="password"
                 rules={[
-                  { required: true },
+                  { required: true, groupId: 'GroupA', id: '2' },
                   context => ({
+                    groupId: 'GroupA',
+                    id: '3',
                     validator(_, __, callback) {
                       if (context.isFieldTouched('password2')) {
                         context.validateFields(['password2']);
@@ -85,8 +87,10 @@ export default () => {
               <Field
                 name="password2"
                 rules={[
-                  { required: true },
+                  { required: true, groupId: 'GroupB', id: '4' },
                   context => ({
+                    groupId: 'GroupB',
+                    id: '5',
                     validator(rule, value, callback) {
                       const { password } = context.getFieldsValue(true);
                       if (password !== value) {
@@ -102,7 +106,7 @@ export default () => {
               <FieldState form={form} name="password2" />
               <Error>{password2Error}</Error>
 
-              <Field name="renderProps" rules={[{ required: true }]}>
+              <Field name="renderProps" rules={[{ required: true, id: '6' }]}>
                 {(control, meta) => (
                   <div>
                     Use Meta:
@@ -117,8 +121,9 @@ export default () => {
                 name="validateTrigger"
                 validateTrigger={['onSubmit', 'onChange']}
                 rules={[
-                  { required: true, validateTrigger: 'onSubmit' },
+                  { required: true, validateTrigger: 'onSubmit', id: '7' },
                   {
+                    id: '8',
                     validator(rule, value, callback) {
                       setTimeout(() => {
                         if (Number(value).toString() === value) {
@@ -155,6 +160,38 @@ export default () => {
               >
                 Validate All
               </button>
+              <button
+                type="button"
+                onClick={() => {
+                  form.validateFields({
+                    groupId: 'GroupA',
+                  });
+                }}
+              >
+                Validate GroupA
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  form.validateFields({
+                    groupId: 'GroupB',
+                  });
+                }}
+              >
+                Validate GroupB
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  form.validateFields({
+                    ignore: (rule) => {
+                      return (Number(rule.id) % 2) === 0
+                    }
+                  });
+                }}
+              >
+                Validate Logical 
+              </button>
 
               <button type="submit">Submit</button>
             </React.Fragment>

diff --git a/src/Field.tsx b/src/Field.tsx
@@ -363,7 +363,7 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
     const namePath = this.getNamePath();
     const currentValue = this.getValue();
 
-    const { triggerName, validateOnly = false } = options || {};
+    const { triggerName, validateOnly = false, groupId, ignore } = options || {};
 
     // Force change to async to avoid rule OOD under renderProps field
     const rootPromise = Promise.resolve().then(() => {
@@ -387,6 +387,14 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
           });
       }
 
+      if (groupId) {
+        filteredRules = filteredRules.filter(rule => rule.groupId === groupId)
+      }
+
+      if (ignore) {
+        filteredRules = filteredRules.filter(rule => !ignore(rule))
+      }
+
       const promise = validateRules(
         namePath,
         currentValue,

diff --git a/src/interface.ts b/src/interface.ts
@@ -68,6 +68,8 @@ interface BaseRule {
   transform?: (value: StoreValue) => StoreValue;
   type?: RuleType;
   whitespace?: boolean;
+  id?: string
+  groupId?: string
 
   /** Customize rule level `validateTrigger`. Must be subset of Field `validateTrigger` */
   validateTrigger?: string | string[];
@@ -131,6 +133,8 @@ export interface ValidateOptions {
    * Validate only and not trigger UI and Field status update
    */
   validateOnly?: boolean;
+  groupId?: string
+  ignore?: (rule: RuleObject) => boolean
 }
 
 export type ValidateFields<Values = any> = {