@ziadshalaby/ngx-zs-component 3.2.5 → 3.2.6

package/fesm2022/ziadshalaby-ngx-zs-component.mjs

@@ -1232,20 +1232,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 }]
         }] });
 
-// ==============================================
-// Types
-// ==============================================
-// ==============================================
-// Zform Class
-// ==============================================
 class Form {
     fields;
-    touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
+    initialValues;
     constructor(initial) {
+        this.initialValues = { ...initial };
         this.fields = Object.keys(initial).reduce((acc, key) => {
             acc[key] = signal({
                 value: initial[key],
                 valid: false,
+                touched: false,
             });
             return acc;
         }, {});
@@ -1253,8 +1249,9 @@ class Form {
     // ==============================================
     // Field Accessors
     // ==============================================
-    set(key, value, valid = true) {
-        this.fields[key].set({ value, valid });
+    set(key, value, valid = true, touched = true) {
+        const current = this.fields[key]();
+        this.fields[key].set({ value, valid, touched: touched || current.touched });
     }
     patch(key, partial) {
         const current = this.fields[key]();
@@ -1266,18 +1263,26 @@ class Form {
     // ==============================================
     // Form State & Validation
     // ==============================================
-    allFilled() {
-        const result = {};
+    markAllTouched() {
         for (const key in this.fields) {
-            if (this.fields.hasOwnProperty(key)) {
-                const val = this.fields[key]().value;
-                result[key] = val !== null && val !== undefined && val !== '';
-            }
+            const field = this.fields[key]();
+            this.fields[key].set({ ...field, touched: true });
         }
-        return result;
     }
-    markAllTouched() {
-        this.touched.set(true);
+    allTouched() {
+        return Object.keys(this.fields).every(key => this.fields[key]().touched);
+    }
+    // ==============================================
+    // Reset
+    // ==============================================
+    reset() {
+        for (const key in this.fields) {
+            this.fields[key].set({
+                value: this.initialValues[key],
+                valid: false,
+                touched: false,
+            });
+        }
     }
     // ==============================================
     // Data Extraction & Submission
@@ -1300,21 +1305,25 @@ class Form {
         }
         return result;
     }
+    allFilled() {
+        const result = {};
+        for (const key in this.fields) {
+            if (this.fields.hasOwnProperty(key)) {
+                const val = this.fields[key]().value;
+                result[key] = val !== null && val !== undefined && val !== '';
+            }
+        }
+        return result;
+    }
     submit(callback, allowEmptyFields = [], allowInvalidFields = []) {
         this.markAllTouched();
         const filled = this.allFilled();
         const validations = this.getValidations();
-        // =============================
-        // Check FILL
-        // =============================
         const allFilled = Object.keys(filled).every((key) => {
             if (allowEmptyFields.includes(key))
                 return true;
             return filled[key];
         });
-        // =============================
-        // Check VALID
-        // =============================
         const allValid = Object.keys(validations).every((key) => {
             if (allowInvalidFields.includes(key))
                 return true;