feat(Form): add clearFieldsValidation and setFieldError methods

Author: tenphi

.changeset/funny-oranges-hope.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Add `clearFieldsValidation()` and `setFieldError()` methods to form to replace deprecated `setFields()`.

src/components/form/Form/submit.test.tsx

@@ -250,4 +250,123 @@ describe('<Form />', () => {
       expect(resetButton).toBeDisabled();
     });
   });
+
+  it('should clear validation errors using clearFieldsValidation', async () => {
+    const onSubmit = jest.fn(() => Promise.reject('Submit Error'));
+
+    const { getByRole, getByText, formInstance } = renderWithForm(
+      <>
+        <Form.Item
+          name="test"
+          label="Test"
+          rules={[
+            {
+              validator(rule, value) {
+                return value
+                  ? Promise.resolve()
+                  : Promise.reject('Field is required');
+              },
+            },
+          ]}
+        >
+          <TextInput />
+        </Form.Item>
+
+        <SubmitButton>Submit</SubmitButton>
+      </>,
+      { formProps: { onSubmit } },
+    );
+
+    const input = getByRole('textbox');
+    const submitButton = getByRole('button', { name: 'Submit' });
+
+    // Initial state: no validation error
+    expect(() => getByText('Field is required')).toThrow();
+
+    // Click submit and check for validation error
+    await userEvents.click(submitButton);
+
+    await waitFor(() => {
+      expect(getByText('Field is required')).toBeInTheDocument();
+    });
+
+    // Clear all validation errors
+    await act(async () => {
+      formInstance.clearFieldsValidation();
+    });
+
+    await waitFor(() => {
+      expect(() => getByText('Field is required')).toThrow(); // Error should be gone
+    });
+
+    // Click submit again to re-trigger validation error
+    await userEvents.click(submitButton);
+
+    await waitFor(() => {
+      expect(getByText('Field is required')).toBeInTheDocument();
+    });
+
+    // Clear validation error for specific field
+    await act(async () => {
+      formInstance.clearFieldsValidation(['test']);
+    });
+
+    await waitFor(() => {
+      expect(() => getByText('Field is required')).toThrow(); // Error should be gone
+    });
+  });
+
+  it('should set validation error using setFieldError', async () => {
+    const onSubmit = jest.fn(() => Promise.resolve());
+
+    const { getByRole, getByText, formInstance } = renderWithForm(
+      <>
+        <Form.Item
+          name="test"
+          label="Test"
+          rules={[
+            {
+              validator(rule, value) {
+                return value
+                  ? Promise.resolve()
+                  : Promise.reject('Field is required');
+              },
+            },
+          ]}
+        >
+          <TextInput />
+        </Form.Item>
+
+        <SubmitButton>Submit</SubmitButton>
+      </>,
+      { formProps: { onSubmit } },
+    );
+
+    const input = getByRole('textbox');
+    const submitButton = getByRole('button', { name: 'Submit' });
+
+    // Initial state: no validation error
+    expect(() => getByText('Custom Error Message')).toThrow();
+
+    // Set validation error programmatically
+    await act(async () => {
+      formInstance.setFieldError('test', 'Custom Error Message');
+    });
+
+    await waitFor(() => {
+      expect(getByText('Custom Error Message')).toBeInTheDocument();
+    });
+
+    // Type into input and verify error remains
+    await act(async () => {
+      await userEvents.type(input, 'test');
+    });
+
+    // Typing remove the error
+    expect(() => getByText('Custom Error Message')).toThrow();
+
+    await userEvents.click(submitButton);
+
+    expect(() => getByText('Field is required')).toThrow();
+  });
 });

src/components/form/Form/use-form.tsx

@@ -217,25 +217,23 @@ export class CubeFormInstance<
   }
 
   resetFields(names?: (keyof T & string)[], skipRender?: boolean): void {
-    Object.values(this.fields).forEach((field) => {
-      if (!field || (names && !names?.includes(field.name))) {
+    names = names ?? Object.keys(this.fields);
+
+    names.forEach((fieldName) => {
+      const field = this.fields[fieldName];
+
+      if (!field) {
         return;
       }
 
-      const defaultValue = this.defaultValues[field.name] ?? undefined;
+      const defaultValue = this.defaultValues[fieldName] ?? undefined;
 
       field.value = defaultValue;
-      field.errors = [];
       field.touched = false;
-      field.status = undefined;
       field.inputValue = defaultValue;
-
-      // reject all ongoing validations
-      if (!field.validationId) {
-        field.validationId = 1;
-      } else {
-        field.validationId++;
-      }
+      field.errors = [];
+      field.status = undefined;
+      field.validationId = (field.validationId ?? 0) + 1;
     });
 
     if (!skipRender) {
@@ -262,11 +260,7 @@ export class CubeFormInstance<
     field.validating = true;
     field.status = undefined;
 
-    if (!field.validationId) {
-      field.validationId = 1;
-    } else {
-      field.validationId++;
-    }
+    field.validationId = (field.validationId ?? 0) + 1;
 
     const validationId = field.validationId;
 
@@ -415,6 +409,36 @@ export class CubeFormInstance<
     this.forceReRender();
   }
 
+  clearFieldsValidation(names?: (keyof T & string)[], skipRender?: boolean) {
+    (names || Object.keys(this.fields)).forEach((name) => {
+      const field = this.getFieldInstance(name);
+
+      if (!field) return;
+
+      field.errors = [];
+      field.status = undefined;
+      field.validationId = (field.validationId ?? 0) + 1;
+    });
+
+    if (!skipRender) {
+      this.forceReRender();
+    }
+  }
+
+  setFieldError(name: keyof T & string, error: string, skipRender?: boolean) {
+    const field = this.getFieldInstance(name);
+
+    if (!field || !error.trim()) return;
+
+    field.errors = [error];
+    field.status = 'invalid';
+    field.validationId = (field.validationId ?? 0) + 1;
+
+    if (!skipRender) {
+      this.forceReRender();
+    }
+  }
+
   setSubmitting(isSubmitting: boolean) {
     if (this.isSubmitting === isSubmitting) return;