@klippa/ngx-enhancy-forms 11.5.2 → 11.6.0

package/fesm2020/klippa-ngx-enhancy-forms.mjs

@@ -3,7 +3,7 @@ import { Directive, Input, Component, SkipSelf, Optional, InjectionToken, Host,
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { UntypedFormArray, UntypedFormGroup, UntypedFormControl, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { UntypedFormArray, UntypedFormGroup, UntypedFormControl, FormControl, FormArray, FormGroup, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { isString } from 'lodash-es';
 import { isArray } from 'lodash';
 import * as i4 from '@ng-select/ng-select';
@@ -86,6 +86,44 @@ function splitArrayByCondition(value, condition) {
     }, [[]]);
 }
 
+function mergeArray(arrA, arrB) {
+    const arr = new Array(Math.max(arrA.length, arrB.length));
+    for (let i = 0; i < arr.length; i++) {
+        if (typeof arrA[i] === 'object' && typeof arrB[i] === 'object') {
+            arr[i] = deepMerge(arrA[i], arrB[i]);
+        }
+        else {
+            arr[i] = arrB[i] ?? arrA[i];
+        }
+    }
+    return arr;
+}
+function deepMerge(objA, objB) {
+    if (Array.isArray(objA) || Array.isArray(objB)) {
+        if (Array.isArray(objA) && Array.isArray(objB)) {
+            return mergeArray(objA, objB);
+        }
+        // if a and b differ in type, prefer b.
+        return objB ?? objA;
+    }
+    const merged = {};
+    const keys = new Set([
+        ...Object.keys(objA),
+        ...Object.keys(objB),
+    ]);
+    keys.forEach((key) => {
+        const a = objA[key];
+        const b = objB[key];
+        if (typeof a === 'object' && typeof b === 'object') {
+            merged[key] = deepMerge(a, b);
+            return;
+        }
+        // if a and b differ in type, prefer b.
+        merged[key] = (b ?? a);
+    });
+    return merged;
+}
+
 const invalidFieldsSymbol = Symbol('Not all fields are valid');
 class SubFormDirective {
 }
@@ -227,10 +265,13 @@ class FormComponent {
         });
         allControls.forEach(e => this.disableInactiveFormControl(e));
         allControls.forEach(e => e.updateValueAndValidity());
-        const values = this.formGroup.value;
+        const formGroupValue = this.formGroup.value;
+        const renderedAndEnabledValues = this.getRenderedFieldValuesFormGroup(this.formGroup, true);
+        const renderedButDisabledValues = this.getRenderedFieldValuesFormGroup(this.formGroup, false);
         if (this.formGroup.valid) {
             this.setDisabledStatesForAllControls(originalDisabledStates);
-            return Promise.resolve(values);
+            const renderedValues = deepMerge(renderedAndEnabledValues, renderedButDisabledValues);
+            return Promise.resolve([formGroupValue, renderedValues]);
         }
         else {
             this.activeControls.find((e) => !e.formControl.valid)?.formElement?.scrollTo();
@@ -238,6 +279,39 @@ class FormComponent {
             return Promise.reject(invalidFieldsSymbol);
         }
     }
+    getRenderedFieldValuesFormGroup(formGroup, enabled, valueObject = {}) {
+        Object.entries(formGroup.controls).forEach(([name, control]) => {
+            if (control instanceof FormControl && control.enabled === enabled && this.activeControls.some(e => e.formControl === control)) {
+                valueObject[name] = control.value;
+            }
+            else if (control instanceof FormArray) {
+                valueObject[name] = [];
+                this.getRenderedFieldValuesFormArray(control, enabled, valueObject[name]);
+            }
+            else if (control instanceof FormGroup) {
+                valueObject[name] = {};
+                this.getRenderedFieldValuesFormGroup(control, enabled, valueObject[name]);
+            }
+        });
+        return valueObject;
+    }
+    getRenderedFieldValuesFormArray(formArray, enabled, valueArray) {
+        formArray.controls.forEach((control) => {
+            if (control instanceof FormControl && control.enabled === enabled && this.activeControls.some(e => e.formControl === control)) {
+                valueArray.push(control.value);
+            }
+            else if (control instanceof FormArray) {
+                const newArray = [];
+                valueArray.push(newArray);
+                this.getRenderedFieldValuesFormArray(control, enabled, newArray);
+            }
+            else if (control instanceof FormGroup) {
+                const newObject = {};
+                valueArray.push(newObject);
+                this.getRenderedFieldValuesFormGroup(control, enabled, newObject);
+            }
+        });
+    }
     setDisabledStatesForAllControls(originalDisabledStates) {
         originalDisabledStates.forEach((e) => {
             if (e.disabled) {
@@ -996,9 +1070,9 @@ class FormSubmitButtonComponent {
     submitForm() {
         this.parentForm
             .trySubmit()
-            .then((value) => {
+            .then(([renderedAndEnabledValues, renderedValues]) => {
             this.isLoading = true;
-            const submitCallbackResult = this.submitCallback(value);
+            const submitCallbackResult = this.submitCallback(renderedAndEnabledValues, renderedValues);
             if (isNullOrUndefined(submitCallbackResult)) {
                 throw new Error('No promise is returned in your submit function.');
             }