feat(Form): new methods (#1093)

Author: tenphi

.changeset/form-qol-methods.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+Add `getFieldNames`, `isFieldDirty`, `getDirtyFieldNames`, `getValidFieldNames`, and `getInvalidFieldNames` methods to `CubeFormInstance`.

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

@@ -58,6 +58,11 @@ export class CubeFormInstance<
     this.createField = this.createField.bind(this);
     this.isFieldInvalid = this.isFieldInvalid.bind(this);
     this.isFieldTouched = this.isFieldTouched.bind(this);
+    this.isFieldDirty = this.isFieldDirty.bind(this);
+    this.getFieldNames = this.getFieldNames.bind(this);
+    this.getDirtyFieldNames = this.getDirtyFieldNames.bind(this);
+    this.getValidFieldNames = this.getValidFieldNames.bind(this);
+    this.getInvalidFieldNames = this.getInvalidFieldNames.bind(this);
     this.setFields = this.setFields.bind(this);
   }
 
@@ -326,27 +331,46 @@ export class CubeFormInstance<
     return !!field.touched;
   }
 
+  isFieldDirty<Name extends keyof T & string>(name: Name): boolean {
+    const field = this.getFieldInstance(name);
+
+    if (!field) return false;
+
+    return !isEqual(field.value, this.defaultValues[name]);
+  }
+
+  getFieldNames(): (keyof T & string)[] {
+    return Object.keys(this.fields) as (keyof T & string)[];
+  }
+
+  getDirtyFieldNames(): (keyof T & string)[] {
+    return this.getFieldNames().filter((name) => this.isFieldDirty(name));
+  }
+
+  getValidFieldNames(): (keyof T & string)[] {
+    return this.getFieldNames().filter((name) => this.isFieldValid(name));
+  }
+
+  getInvalidFieldNames(): (keyof T & string)[] {
+    return this.getFieldNames().filter((name) => this.isFieldInvalid(name));
+  }
+
   get isTouched(): boolean {
     return Object.values(this.fields).some((field) => field?.touched);
   }
 
   get isDirty(): boolean {
-    return Object.values(this.fields).some((field) => {
-      return field && field.name
-        ? JSON.stringify(field?.value) !==
-            JSON.stringify(this.defaultValues[field?.name])
-        : false;
-    });
+    return this.getDirtyFieldNames().length > 0;
   }
 
   /**
    * True if all fields are verified and valid
    * IMPORTANT: This is not the same as `!isInvalid`, because it also checks if all fields are verified.
    */
   get isValid(): boolean {
-    return Object.values(this.fields).every((field) => {
-      return field?.status === 'valid';
-    });
+    return Object.values(this.fields).every(
+      (field) => field?.status === 'valid',
+    );
   }
 
   /**
@@ -355,9 +379,9 @@ export class CubeFormInstance<
    * one field is verified and invalid.
    */
   get isInvalid(): boolean {
-    return Object.values(this.fields).some((field) => {
-      return field?.status === 'invalid';
-    });
+    return Object.values(this.fields).some(
+      (field) => field?.status === 'invalid',
+    );
   }
 
   getFieldError<Name extends keyof T & string>(name: Name): ReactNode[] {