Merge pull request #137 from erqk/v8

V8
erqk · Jul 25, 2024 · ad007fd · ad007fd
2 parents 1f9c7e0 + 93c014c
commit ad007fd
Show file tree

Hide file tree

Showing 10 changed files with 122 additions and 81 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,15 @@
+# 8.2.1 (2024-07-25)
+
+[1111b7e]: https://github.com/erqk/ng-dynamic-json-form/commit/1111b7e95cc0e423078f0ca181a72908b3ec2ed0
+[452d092]: https://github.com/erqk/ng-dynamic-json-form/commit/452d09242d2c60bfd8909f5cf41ea6483c02847f
+[4b424c9]: https://github.com/erqk/ng-dynamic-json-form/commit/4b424c93d401bd289177341553cdf0e946892d42
+
+| Commit    | Type | Description                                                                                   |
+| --------- | ---- | --------------------------------------------------------------------------------------------- |
+| [1111b7e] | fix  | Checkbox `containerStyles` should able to overwrite the flex-direction specified in `layout`. |
+| [452d092] | fix  | Parse the string value to number before compare, to get correct validation errors.            |
+| [4b424c9] | fix  | PropsBindingDirective: Filter out all the null/undefined value before object destructuring.   |
+
 # 8.2.0 (2024-07-18)
 
 [3c0d30b]: https://github.com/erqk/ng-dynamic-json-form/commit/3c0d30bbdd5865c4bc9f199828d1a4bf05ac768f

diff --git a/lib/core/directives/props-binding.directive.ts b/lib/core/directives/props-binding.directive.ts
@@ -36,13 +36,21 @@ export class PropsBindingDirective {
   }
 
   private _bindProperties(): void {
-    if (!this.propsBinding?.length) {
+    const propsBinding = (this.propsBinding ?? []).filter((x) => {
+      return (
+        Boolean(x) &&
+        typeof x.props === 'object' &&
+        Object.keys(x.props).length > 0
+      );
+    });
+
+    if (!propsBinding.length) {
       return;
     }
 
     const host = this._el.nativeElement;
 
-    for (const item of this.propsBinding) {
+    for (const item of propsBinding) {
       const { props, key, omit = [] } = item;
       const providerToken = this._injectionTokens?.find(
         (x) => x.key === key

diff --git a/lib/core/services/form-validation.service.ts b/lib/core/services/form-validation.service.ts
@@ -126,10 +126,18 @@ export class FormValidationService {
 
         const targetKey = valueKey[x.name as ValidatorsEnum] ?? '';
         const requiredValue = controlErrors[key][targetKey];
+
+        // If the value is string and can be parsed, then convert to number,
+        // otherwise the value will be mismatched with the value in the `controlErrors`.
+        const validatorValue =
+          typeof x.value !== 'number' && !isNaN(x.value)
+            ? parseInt(x.value)
+            : x.value;
+
         const requiredValueMatch =
           requiredValue && x.name === 'pattern'
-            ? requiredValue.includes(x.value)
-            : requiredValue === x.value;
+            ? requiredValue.includes(validatorValue)
+            : requiredValue === validatorValue;
 
         return requiredValueMatch && key === errorKey;
       });

diff --git a/lib/core/ui-basic/ui-basic-checkbox/ui-basic-checkbox.component.html b/lib/core/ui-basic/ui-basic-checkbox/ui-basic-checkbox.component.html
@@ -1,83 +1,78 @@
 <ng-container *ngIf="data">
   <div
     class="group-buttons"
-    [style]="data.options?.containerStyles"
+    [style]="groupButtonsStyles"
     [ngClass]="[
       data.options?.containerClass ?? '',
       control.disabled ? 'disabled' : ''
     ]"
-    [ngStyle]="{
-      'flex-direction': data.options?.layout
-    }"
   >
     <ng-container *ngFor="let item of data.options?.data">
-      <div class="option-button-wrapper">
-        <label
-          class="option-button"
-          [ngStyle]="{
-            'justify-content':
-              data.options?.labelPosition === 'before' ? 'space-between' : null
-          }"
-        >
-          <ng-container
-            *ngTemplateOutlet="
-              labelTemplate;
-              context: {
-                label: item.label,
-                isBefore: true
-              }
-            "
-          ></ng-container>
+      <label
+        class="option-button"
+        [ngStyle]="{
+          'justify-content':
+            data.options?.labelPosition === 'before' ? 'space-between' : null
+        }"
+      >
+        <ng-container
+          *ngTemplateOutlet="
+            labelTemplate;
+            context: {
+              label: item.label,
+              isBefore: true
+            }
+          "
+        ></ng-container>
 
-          <ng-container *ngIf="data.options && data.options.data">
-            <!-- binary checkbox -->
-            <ng-container *ngIf="data.options.data.length === 1">
-              <input
-                #checkboxBinary
-                type="checkbox"
-                [propsBinding]="[
-                  {
-                    props: data.props,
-                    omit: ['type']
-                  }
-                ]"
-                [formControl]="control"
-              />
-            </ng-container>
+        <ng-container *ngIf="data.options && data.options.data">
+          <!-- binary checkbox -->
+          <ng-container *ngIf="data.options.data.length === 1">
+            <input
+              #checkboxBinary
+              type="checkbox"
+              [propsBinding]="[
+                {
+                  props: data.props,
+                  omit: ['type']
+                }
+              ]"
+              [formControl]="control"
+            />
+          </ng-container>
 
-            <!-- multi-select checkbox -->
-            <ng-container *ngIf="data.options.data.length > 1">
-              <input
-                type="checkbox"
-                [propsBinding]="[
-                  {
-                    props: data.props,
-                    omit: ['type']
-                  }
-                ]"
-                [value]="item.value | json"
-                [checked]="
-                  control.value && control.value!.includes(item.value | json)
-                "
-                [disabled]="control.disabled"
-                (change)="onCheckboxChange($event)"
-              />
-            </ng-container>
+          <!-- multi-select checkbox -->
+          <ng-container *ngIf="data.options.data.length > 1">
+            <input
+              type="checkbox"
+              [propsBinding]="[
+                {
+                  props: data.props,
+                  omit: ['type']
+                }
+              ]"
+              [value]="item.value | json"
+              [checked]="
+                control.value && control.value!.includes(item.value | json)
+              "
+              [disabled]="control.disabled"
+              (change)="onCheckboxChange($event)"
+            />
           </ng-container>
+        </ng-container>
 
-          <span class="marker"></span>
+        <span class="marker"></span>
 
-          <ng-container
-            *ngTemplateOutlet="
-              labelTemplate;
-              context: {
-                label: item.label,
-                isBefore: false
-              }
-            "
-          ></ng-container>
-        </label>
-      </div>
+        <ng-container
+          *ngTemplateOutlet="
+            labelTemplate;
+            context: {
+              label: item.label,
+              isBefore: false
+            }
+          "
+        ></ng-container>
+      </label>
     </ng-container>
   </div>
 

diff --git a/lib/core/ui-basic/ui-basic-checkbox/ui-basic-checkbox.component.ts b/lib/core/ui-basic/ui-basic-checkbox/ui-basic-checkbox.component.ts
@@ -48,4 +48,12 @@ export class UiBasicCheckboxComponent extends CustomControlComponent {
 
     this.control.setValue(newValue);
   }
+
+  get groupButtonsStyles(): string {
+    return `
+      flex-direction: ${this.data?.options?.layout ?? 'row'};
+      align-items: flex-start;
+      ${this.data?.options?.containerStyles ?? ''}
+    `.replace(/\s{2,}/g, '');
+  }
 }
diff --git a/lib/package.json b/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ng-dynamic-json-form",
-  "version": "8.2.0",
+  "version": "8.2.1",
   "author": {
     "name": "erqk",
     "url": "https://github.com/erqk"

diff --git a/lib/ui-material/ui-material-checkbox/ui-material-checkbox.component.html b/lib/ui-material/ui-material-checkbox/ui-material-checkbox.component.html
@@ -1,11 +1,8 @@
 <ng-container *ngIf="data">
   <div
     class="group-buttons"
-    [style]="data.options?.containerStyles"
+    [style]="groupButtonsStyles"
     [ngClass]="[data.options?.containerClass ?? '']"
-    [ngStyle]="{
-      'flex-direction': data.options?.layout
-    }"
   >
     <!-- binary checkbox -->
     <ng-container *ngIf="data.options && data.options.data?.length === 1">

diff --git a/lib/ui-material/ui-material-checkbox/ui-material-checkbox.component.ts b/lib/ui-material/ui-material-checkbox/ui-material-checkbox.component.ts
@@ -67,4 +67,12 @@ export class UiMaterialCheckboxComponent extends CustomControlComponent {
 
     this.control?.setValue(newValue);
   }
+
+  get groupButtonsStyles(): string {
+    return `
+      flex-direction: ${this.data?.options?.layout ?? 'row'};
+      align-items: flex-start;
+      ${this.data?.options?.containerStyles ?? ''}
+    `.replace(/\s{2,}/g, '');
+  }
 }
diff --git a/lib/ui-primeng/ui-primeng-checkbox/ui-primeng-checkbox.component.html b/lib/ui-primeng/ui-primeng-checkbox/ui-primeng-checkbox.component.html
@@ -1,11 +1,8 @@
 <ng-container *ngIf="data">
   <div
     class="group-buttons"
-    [style]="data.options?.containerStyles"
+    [style]="groupButtonsStyles"
     [ngClass]="[data.options?.containerClass ?? '']"
-    [ngStyle]="{
-      'flex-direction': data.options?.layout
-    }"
   >
     <ng-container *ngFor="let item of data.options?.data">
       <label

diff --git a/lib/ui-primeng/ui-primeng-checkbox/ui-primeng-checkbox.component.ts b/lib/ui-primeng/ui-primeng-checkbox/ui-primeng-checkbox.component.ts
@@ -4,7 +4,7 @@ import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import {
   CustomControlComponent,
   PropsBindingDirective,
-  providePropsBinding
+  providePropsBinding,
 } from 'ng-dynamic-json-form';
 import { Checkbox, CheckboxModule } from 'primeng/checkbox';
 
@@ -24,11 +24,19 @@ import { Checkbox, CheckboxModule } from 'primeng/checkbox';
         key: 'p-checkbox',
         token: Checkbox,
       },
-    ])
+    ]),
   ],
   templateUrl: './ui-primeng-checkbox.component.html',
   styles: [],
 })
 export class UiPrimengCheckboxComponent extends CustomControlComponent {
   override control = new FormControl<any | any[]>('');
+
+  get groupButtonsStyles(): string {
+    return `
+      flex-direction: ${this.data?.options?.layout ?? 'row'};
+      align-items: flex-start;
+      ${this.data?.options?.containerStyles ?? ''}
+    `.replace(/\s{2,}/g, '');
+  }
 }