Merge pull request #12 from KiranMantha/develop

implemented form reset functionality
KiranMantha · May 2, 2024 · 786b7ae · 786b7ae
2 parents 3544d8e + fca61a6
commit 786b7ae
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 43 deletions.
diff --git a/dist/fieldArray.d.ts b/dist/fieldArray.d.ts
@@ -14,5 +14,7 @@ export declare class FieldArray {
     append(newItem: Record<string, InitialValueType>): void;
     remove(index: number): void;
     validate(): void;
+    reset(): void;
     private _generateControls;
+    private _generateItemControls;
 }
diff --git a/dist/formControl.d.ts b/dist/formControl.d.ts
@@ -1,16 +1,18 @@
 import { InitialValueType, ValidatorFn, ValidatorObj } from './model';
 export declare class FormControl {
     name: string;
-    value: any;
     validators: Array<ValidatorFn | ValidatorObj>;
     isTouched: boolean;
     validity: any;
+    private _initialValue;
+    private _value;
     private _errorMessage;
     private _parent;
     constructor(name: string, controlValue: InitialValueType, parent?: {
         setError: (controlName: string, validity: Record<string, boolean> | null) => void;
     } | null);
     get errorMessage(): string;
+    get value(): any;
     register(): {
         attrs: {
             name: string;
@@ -20,4 +22,5 @@ export declare class FormControl {
         };
     };
     validate(): void;
+    reset(): void;
 }
diff --git a/dist/index.js b/dist/index.js
@@ -1,5 +1,5 @@
 import { signal as l } from "@plumejs/core";
-const i = (s) => typeof s == "function", h = (s, e) => s.nodeName && s.nodeName.toLowerCase() === e.toLowerCase(), c = (s) => {
+const n = (s) => typeof s == "function", h = (s, e) => s.nodeName && s.nodeName.toLowerCase() === e.toLowerCase(), c = (s) => {
   let e;
   switch (s.nodeName && s.nodeName.toLowerCase()) {
     case "input":
@@ -8,10 +8,10 @@ const i = (s) => typeof s == "function", h = (s, e) => s.nodeName && s.nodeName.
       break;
     }
     case "select": {
-      const t = s.type === "select-one", o = [...Array.from(s.options).filter(
-        (n) => !n.disabled && (!n.parentNode.disabled || !h(n.parentNode, "optgroup"))
-      )].filter((n) => n.selected).map((n) => n.value ?? (n.textContent.match(/[^\x20\t\r\n\f]+/g) || []).join(" "));
-      e = t ? o[0] : o;
+      const t = s.type === "select-one", i = [...Array.from(s.options).filter(
+        (o) => !o.disabled && (!o.parentNode.disabled || !h(o.parentNode, "optgroup"))
+      )].filter((o) => o.selected).map((o) => o.value ?? (o.textContent.match(/[^\x20\t\r\n\f]+/g) || []).join(" "));
+      e = t ? i[0] : i;
       break;
     }
     default: {
@@ -24,19 +24,22 @@ const i = (s) => typeof s == "function", h = (s, e) => s.nodeName && s.nodeName.
 class a {
   constructor(e, t, r) {
     this.isTouched = !1, this.validity = null, this._errorMessage = l(""), this._parent = null;
-    const o = [...Array.isArray(t) ? t : [t]];
-    this.name = e, this.value = o[0], this.validators = o.length > 1 ? o[1] : [], this._parent = r;
+    const i = [...Array.isArray(t) ? t : [t]];
+    this.name = e, this._initialValue = i[0], this._value = i[0], this.validators = i.length > 1 ? i[1] : [], this._parent = r;
   }
   get errorMessage() {
     return this._errorMessage();
   }
+  get value() {
+    return this._value;
+  }
   register() {
     return {
       attrs: {
         name: this.name,
         value: this.value,
         onchange: (e) => {
-          this.value = c(e.target);
+          this._value = c(e.target);
         },
         onblur: () => {
           this.isTouched = !0, this.validate();
@@ -48,43 +51,46 @@ class a {
     var t;
     let e = "";
     for (const r of this.validators)
-      if (this.validity = i(r) ? r(this.value) : r.rule(this.value), this.validity !== null) {
-        e = i(r) ? "error" : r.message, (t = this._parent) == null || t.setError(this.name, this.validity);
+      if (this.validity = n(r) ? r(this.value) : r.rule(this.value), this.validity !== null) {
+        e = n(r) ? "error" : r.message, (t = this._parent) == null || t.setError(this.name, this.validity);
         break;
       }
     this._errorMessage.set(e);
   }
+  reset() {
+    this._value = this._initialValue, this.isTouched = !1, this.validity = null, this._errorMessage.set("");
+  }
 }
 const d = () => Math.random().toString(36).substring(2);
 class _ {
   constructor(e) {
     this._controls = l([]), this.validity = null, this._initialCollection = e;
-    const t = e.map((r) => this._generateControls(r));
+    const t = this._generateControls(e);
     this._controls.set(t);
   }
   get value() {
     return this.controls.map((t) => {
       const r = {};
-      for (const o of t)
-        r[o.name] = o.control.value;
+      for (const i of t)
+        r[i.name] = i.control.value;
       return r;
     });
   }
   get controls() {
     return [...this._controls()];
   }
   append(e) {
-    this._controls.set((t) => [...t, this._generateControls(e)]);
+    this._controls.set((t) => [...t, this._generateItemControls(e)]);
   }
   remove(e) {
     const t = [...this.controls];
     t.splice(e, 1), this._controls.set(t);
   }
   validate() {
     const e = this.controls.flatMap((t) => {
-      const r = t.filter(({ control: o }) => {
-        if (o.validate(), o.errorMessage)
-          return o.errorMessage;
+      const r = t.filter(({ control: i }) => {
+        if (i.validate(), i.errorMessage)
+          return i.errorMessage;
       });
       if (r.length)
         return r;
@@ -93,13 +99,20 @@ class _ {
       invalid: !0
     } : null;
   }
+  reset() {
+    const e = this._generateControls(this._initialCollection);
+    this.validity = null, this._controls.set(e);
+  }
   _generateControls(e) {
+    return e.map((t) => this._generateItemControls(t));
+  }
+  _generateItemControls(e) {
     const t = [], r = d();
-    for (const [o, n] of Object.entries(e)) {
+    for (const [i, o] of Object.entries(e)) {
       const u = {
-        name: o,
-        control: new a(`${o}-${r}`, n),
-        indexedName: `${o}-${r}`
+        name: i,
+        control: new a(`${i}-${r}`, o),
+        indexedName: `${i}-${r}`
       };
       t.push(u);
     }
@@ -140,6 +153,9 @@ class g {
     e.preventDefault(), this._isSubmitted = !0, this._checkValidity(), t(this.value);
   }
   reset() {
+    this._controls.forEach((e) => {
+      e.reset();
+    }), this._isSubmitted = !1, this._errors.clear(), this._errorCount = 0;
   }
   _setError(e, t) {
     t ? this._errors.set(e, t) : this._errors.delete(e), this._errorCount = this._errors.size;

diff --git a/dist/index.js.br b/dist/index.js.br
diff --git a/src/fieldArray.ts b/src/fieldArray.ts
@@ -12,9 +12,7 @@ export class FieldArray {
 
   constructor(itemCollection: Array<Record<string, InitialValueType>>) {
     this._initialCollection = itemCollection;
-    const controls = itemCollection.map((item) => {
-      return this._generateControls(item);
-    });
+    const controls = this._generateControls(itemCollection);
     this._controls.set(controls);
   }
 
@@ -34,7 +32,7 @@ export class FieldArray {
   }
 
   append(newItem: Record<string, InitialValueType>) {
-    this._controls.set((prevValue) => [...prevValue, this._generateControls(newItem)]);
+    this._controls.set((prevValue) => [...prevValue, this._generateItemControls(newItem)]);
   }
 
   remove(index: number) {
@@ -61,7 +59,19 @@ export class FieldArray {
       : null;
   }
 
-  private _generateControls(item: Record<string, InitialValueType>) {
+  reset() {
+    const controls = this._generateControls(this._initialCollection);
+    this.validity = null;
+    this._controls.set(controls);
+  }
+
+  private _generateControls(collection: Array<Record<string, InitialValueType>>) {
+    return collection.map((item) => {
+      return this._generateItemControls(item);
+    });
+  }
+
+  private _generateItemControls(item: Record<string, InitialValueType>) {
     const items = [];
     const token = createToken();
     for (const [key, value] of Object.entries(item)) {

diff --git a/src/formBuilder.ts b/src/formBuilder.ts
@@ -62,19 +62,12 @@ export class FormBuilder {
   }
 
   reset() {
-    // for (const [key, value] of Object.entries(this._initialValues)) {
-    //   const val = [...(Array.isArray(value) ? value : [value])];
-    //   const { validators } = this._controls.get(key);
-    //   this._controls.set(key, {
-    //     value: JSON.parse(JSON.stringify(val))[0],
-    //     validators,
-    //     isTouched: false,
-    //     errorMessage: ''
-    //   });
-    // }
-    // this._isSubmitted = false;
-    // this._errors.clear();
-    // this._errorCount.set(0);
+    this._controls.forEach((ctrl) => {
+      ctrl.reset();
+    });
+    this._isSubmitted = false;
+    this._errors.clear();
+    this._errorCount = 0;
   }
 
   private _setError(key: string, validity: Record<string, boolean>) {

diff --git a/src/formControl.ts b/src/formControl.ts
@@ -47,11 +47,12 @@ const _getTargetValue = (target: HTMLElement) => {
 
 export class FormControl {
   name: string;
-  value: any;
   validators: Array<ValidatorFn | ValidatorObj>;
   isTouched = false;
   validity = null;
 
+  private _initialValue: any;
+  private _value: any;
   private _errorMessage = signal('');
   private _parent: { setError: (controlName: string, validity: Record<string, boolean> | null) => void } | null = null;
 
@@ -62,7 +63,8 @@ export class FormControl {
   ) {
     const val = [...(Array.isArray(controlValue) ? controlValue : [controlValue])];
     this.name = name;
-    this.value = val[0];
+    this._initialValue = val[0];
+    this._value = val[0];
     this.validators = val.length > 1 ? (val[1] as Array<ValidatorFn | ValidatorObj>) : [];
     this._parent = parent;
   }
@@ -71,13 +73,17 @@ export class FormControl {
     return this._errorMessage();
   }
 
+  get value() {
+    return this._value;
+  }
+
   register() {
     return {
       attrs: {
         name: this.name,
         value: this.value,
         onchange: (e) => {
-          this.value = _getTargetValue(e.target);
+          this._value = _getTargetValue(e.target);
         },
         onblur: () => {
           this.isTouched = true;
@@ -101,4 +107,11 @@ export class FormControl {
     }
     this._errorMessage.set(errorMessage);
   }
+
+  reset() {
+    this._value = this._initialValue;
+    this.isTouched = false;
+    this.validity = null;
+    this._errorMessage.set('');
+  }
 }