Merge pull request #140 from erqk/v8

V8

Author: erqk

CHANGELOG.md

@@ -1,3 +1,19 @@
+# 8.2.7 (2024-09-01)
+
+[2818671]: https://github.com/erqk/ng-dynamic-json-form/commit/28186714b910aeda7e852e736e824b5efc69c620
+
+| Commit    | Type  | Description                            |
+| --------- | ----- | -------------------------------------- |
+| [2818671] | chore | Support form rendering in server side. |
+
+# 8.2.6 (2024-08-28)
+
+[09faf63]: https://github.com/erqk/ng-dynamic-json-form/commit/09faf63326dcf3727f14cb431065adfbe3947e0e
+
+| Commit    | Type | Description                                         |
+| --------- | ---- | --------------------------------------------------- |
+| [09faf63] | fix  | Retain trigger's body value if no control is found. |
+
 # 8.2.5 (2024-08-20)
 
 [802c219]: https://github.com/erqk/ng-dynamic-json-form/commit/802c2190f4ea5a09a15fdafd6c2c3e4df11eb3a8

lib/core/models/form-control-config.interface.ts

@@ -7,27 +7,16 @@ import { ValidatorConfig } from './validator-config.interface';
 
 export interface FormControlConfig {
   formControlName: string;
-
-  /**Action to do on this control when condition is met. e.g. Change visibility or toggle validators */
+  
   conditions?: Conditions;
 
-  /**Provide to make this control as a FormGroup, cannot use with `formArray` */
+  /**Provide to make this control as a `FormGroup` */
   children?: FormControlConfig[];
 
   description?: string;
 
-  /**The properties to bind to the target element or `Directive`. Example:
-   *  @example
-   *  <textarea
-   *    [rows]="extra.rows"
-   *    [cols]="extra.cols"
-   *    ...
-   *  ></textarea>
-   *
-   * @example
-   * <p-calendar
-   *    [appendTo]="extra.appendTo"
-   * ></p-calendar>
+  /**
+   * The properties to bind to the target element or `Directive`
    */
   props?: any;
 
@@ -40,15 +29,9 @@ export interface FormControlConfig {
 
   inputMask?: FactoryArg;
 
-  /**A list of data, use with the following input type:
-   * - `checkbox`
-   * - `dropdown`
-   * - `radio`
-   * - ...custom component type
-   */
   options?: FormControlOptions;
 
-  /**Set this input to readonly, and will add a class `readonly` for styling */
+  /**Set this input to readonly, and will add a class `readonly` to the host element of this control */
   readonly?: boolean;
 
   type?: FormControlType;

lib/core/ng-dynamic-json-form.component.ts

@@ -1,4 +1,4 @@
-import { CommonModule, isPlatformServer } from '@angular/common';
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectorRef,
   Component,
@@ -9,7 +9,6 @@ import {
   Injector,
   Input,
   Output,
-  PLATFORM_ID,
   SimpleChanges,
   TemplateRef,
   Type,
@@ -32,7 +31,6 @@ import {
 import {
   Observable,
   Subject,
-  debounceTime,
   filter,
   fromEvent,
   merge,
@@ -117,7 +115,6 @@ export class NgDynamicJsonFormComponent
     optional: true,
   });
   private _cd = inject(ChangeDetectorRef);
-  private _platformId = inject(PLATFORM_ID);
   private _el = inject(ElementRef);
   private _injector = inject(Injector);
   private _destroyRef = inject(DestroyRef);
@@ -238,10 +235,6 @@ export class NgDynamicJsonFormComponent
   }
 
   ngOnChanges(simpleChanges: SimpleChanges): void {
-    if (isPlatformServer(this._platformId)) {
-      return;
-    }
-
     const { configs, hideErrorMessage } = simpleChanges;
 
     if (hideErrorMessage) {
@@ -256,10 +249,6 @@ export class NgDynamicJsonFormComponent
   }
 
   ngOnInit(): void {
-    if (isPlatformServer(this._platformId)) {
-      return;
-    }
-
     this._setupVariables();
     this._getControlDirective();
     this._buildForm();

lib/core/services/config-mapping.service.ts

@@ -5,8 +5,8 @@ import { FormControlConfig } from '../models';
 @Injectable()
 export class ConfigMappingService {
   getCorrectedConfig(input: FormControlConfig): FormControlConfig {
-    const config = window.structuredClone(input) as FormControlConfig;
-    const { formControlName, type, props, inputMask, children = [] } = config;
+    const config = structuredClone(input) as FormControlConfig;
+    const { formControlName, props, inputMask, children = [] } = config;
 
     config.formControlName = this._getFormControlName(formControlName);
     config.value = config.value ?? this._getFallbackValue(config);

lib/core/services/form-conditions.service.ts

@@ -227,6 +227,10 @@ export class FormConditionsService {
 
   /**Get the target element by using `id`(full control path) on each `div` inside current NgDynamicJsonForm instance */
   private _getTargetEl$(controlPath: string): Observable<HTMLElement | null> {
+    if (typeof window === 'undefined') {
+      return of(null);
+    }
+
     return new Observable((subscriber) => {
       window.requestAnimationFrame(() => {
         // Use `CSS.escape()` to escape all the invalid characters.

lib/core/services/form-generator.service.ts

@@ -1,5 +1,5 @@
 import { Injectable, inject } from '@angular/core';
-import { AbstractControl, FormControl, UntypedFormGroup } from '@angular/forms';
+import { FormControl, UntypedFormGroup } from '@angular/forms';
 import { ValidatorConfig } from '../models';
 import { FormControlConfig } from '../models/form-control-config.interface';
 import { FormValidationService } from './form-validation.service';
@@ -12,30 +12,13 @@ export class FormGeneratorService {
     const formGroup = new UntypedFormGroup({});
 
     for (const item of data) {
-      const isFormControl = !item.children?.length;
-      const isFormGroup = !!item.children?.length;
+      const control = !item.children?.length
+        ? new FormControl(item.value)
+        : this.generateFormGroup(item.children);
 
-      let control: AbstractControl | null = null;
-
-      const validatorConfigs = (item.validators ?? []).reduce((acc, curr) => {
-        if (!acc.find((x) => x.name === curr.name)) acc.push(curr);
-        return acc;
-      }, [] as ValidatorConfig[]);
-
-      const validators =
-        this._formValidationService.getValidators(validatorConfigs);
-
-      if (isFormControl) {
-        control = new FormControl(item.value);
-      }
-
-      if (isFormGroup) {
-        control = this.generateFormGroup(item.children!);
-      }
-
-      if (!control) {
-        throw 'failed to generate form control!';
-      }
+      const validators = this._formValidationService.getValidators(
+        item.validators
+      );
 
       control.setValidators(validators);
       formGroup.addControl(item.formControlName, control);

lib/core/services/form-validation.service.ts

@@ -57,28 +57,21 @@ export class FormValidationService {
     );
   }
 
-  getValidators(input: ValidatorConfig[]): ValidatorFn[] {
-    const customValidators = this._globalVariableService.customValidators;
-    const getCustomValidator = (config: ValidatorConfig) => {
-      const { name, value } = config;
-      const validator = customValidators?.[name];
-
-      if (!validator) {
-        return null;
-      }
-
-      if (value === null || value === undefined) {
-        return validator;
-      }
+  getValidators(input: ValidatorConfig[] | undefined): ValidatorFn[] | null {
+    if (!input || !input.length) {
+      return null;
+    }
 
-      return validator(value) as ValidatorFn;
-    };
+    // Remove duplicates
+    const filteredConfigs = [
+      ...new Map(input.map((v) => [v.name, v])).values(),
+    ];
 
-    return input.map((item) => {
+    return filteredConfigs.map((item) => {
       const { name } = item;
       const value = this._getValidatorValue(item);
       const builtInValidator = builtInValidators(value)[name as ValidatorsEnum];
-      const customValidator = getCustomValidator(item);
+      const customValidator = this._getCustomValidator(item);
 
       const result =
         builtInValidator ?? customValidator ?? Validators.nullValidator;
@@ -87,6 +80,22 @@ export class FormValidationService {
     });
   }
 
+  private _getCustomValidator(config: ValidatorConfig): ValidatorFn | null {
+    const customValidators = this._globalVariableService.customValidators;
+    const { name, value } = config;
+    const validator = customValidators?.[name];
+
+    if (!validator) {
+      return null;
+    }
+
+    if (value === null || value === undefined || `${value}`.trim() === '') {
+      return validator;
+    }
+
+    return validator(value) as ValidatorFn;
+  }
+
   /**Get the error messages of the control
    *
    * @description

lib/core/services/options-data.service.ts

@@ -229,13 +229,14 @@ export class OptionsDataService {
 
     const form = this._globalVariableService.rootForm;
     const result = Object.keys(triggerBody).reduce((acc, key) => {
-      const paths = getControlAndValuePath(triggerBody[key]);
-      const value = getValueInObject(
-        form?.get(paths.controlPath)?.value,
-        paths.valuePath
+      const { controlPath, valuePath } = getControlAndValuePath(
+        triggerBody[key]
       );
 
-      acc[key] = value;
+      const control = form?.get(controlPath);
+      const value = getValueInObject(control?.value, valuePath);
+
+      acc[key] = !control ? triggerBody[key] : value;
       return acc;
     }, {} as any);
 

lib/core/ui-basic/ui-basic-select/ui-basic-select.component.ts

@@ -24,7 +24,7 @@ export class UiBasicSelectComponent extends CustomControlComponent {
 
   override writeValue(obj: any): void {
     const value = this._controlValueService.getOptionsValue('stringified', obj);
-    requestAnimationFrame(() => this.control.setValue(value));
+    this.control.setValue(value);
   }
 
   override registerOnChange(fn: any): void {

lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-dynamic-json-form",
-  "version": "8.2.5",
+  "version": "8.2.7",
   "author": {
     "name": "erqk",
     "url": "https://github.com/erqk"