Merge pull request #164 from erqk/v8

V8
erqk · Feb 14, 2025 · 131bfe1 · 131bfe1
2 parents d1420e5 + 43d6d0e
commit 131bfe1
Show file tree

Hide file tree

Showing 77 changed files with 948 additions and 324 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,13 @@
+# 8.7.0 (2025-02-14)
+
+[f18d93a]: https://github.com/erqk/ng-dynamic-json-form/commit/f18d93ad179b4ed8c42e151d7f19a3401514d3e0
+[b1b924e]: https://github.com/erqk/ng-dynamic-json-form/commit/b1b924e27b5fb12c67bb9cb53046d387eec57cc9
+
+| Commit    | Type | Description                                                            |
+| --------- | ---- | ---------------------------------------------------------------------- |
+| [f18d93a] | feat | Add support for async validators.                                      |
+| [b1b924e] | fix  | Error message not showing when only async validators is in the config. |
+
 # 8.6.1 (2025-01-02)
 
 [28e5e5a]: https://github.com/erqk/ng-dynamic-json-form/commit/28e5e5ae591e180de56c410348b90ffd4ab054d8

diff --git a/README.md b/README.md
@@ -1,6 +1,3 @@
-<img src="https://raw.githubusercontent.com/erqk/ng-dynamic-json-form/refs/heads/main/src/assets/logo.svg
-" width=135>
-
 # NgDynamicJsonForm
 
 <a href="https://codeclimate.com/github/erqk/ng-dynamic-json-form/maintainability"><img src="https://api.codeclimate.com/v1/badges/822fd579fde353c1fa47/maintainability" /></a>

diff --git a/docs/317.839f1185ec87dbbe.js b/docs/317.839f1185ec87dbbe.js
diff --git a/docs/559.b579645af9768a46.js b/docs/559.b579645af9768a46.js
diff --git a/docs/assets/docs/v8/conditions/conditions_en.md b/docs/assets/docs/v8/conditions/conditions_en.md
@@ -50,7 +50,8 @@ The available `NAME` are listed as below.
 
 #### Custom validator
 
-- `validators.` + `name`
+- `validator.` + `name`
+- `asyncValidator.` + `name`
 
 #### Custom action
 

diff --git a/docs/assets/docs/v8/conditions/conditions_zh-TW.md b/docs/assets/docs/v8/conditions/conditions_zh-TW.md
@@ -50,7 +50,8 @@
 
 #### 自訂驗證器
 
-- `validators.` + `name`
+- `validator.` + `name`
+- `asyncValidator.` + `name`
 
 #### 自訂動作
 

diff --git a/docs/assets/docs/v8/validators/validators_en.md b/docs/assets/docs/v8/validators/validators_en.md
@@ -4,6 +4,43 @@ All the Angular’s built-in validators are supported.
 
 > The `email` validator is not using `Validators.email` but using `Validators.pattern`: `/^[^@\s!(){}<>]+@[\w-]+(\.[A-Za-z]+)+$/`
 
+## Validator config
+
+<doc-code>
+
+```json
+{
+  ...
+  "validators": [
+    {
+      "name": "...",
+      "value": "...",
+      "message": "..."
+    }
+  ],
+  "asyncValidators": [
+    // Same with "validators"
+    ...
+  ]
+}
+```
+
+### Properties
+
+#### name
+
+Name of the validator.
+
+#### value
+
+For the validator which needs value to validate like `min`, `max`.
+
+#### message
+
+Custom message to display for Angular's built-in validators.
+
+<doc-code>
+
 ## Add validator to control
 
 To add validators to the control, simply provide the `validators` .
@@ -50,10 +87,31 @@ Some of the validators like `min`, `max` requires value to validate, provide the
 
 ## Custom validators
 
-To use custom validators, set the `name` with value that match with the key inside `customValidators`.
+To use custom validators, add them to the `customValidators` in `provideNgDynamicJsonForm()` provider. Then, set the name in the validator config to match with the key in `customValidators` provider.
 
 <doc-tab>
-<doc-code name="Config">
+
+<doc-code name="app.config.ts">
+
+```ts
+import { ApplicationConfig } from '@angular/core';
+import { provideNgDynamicJsonForm } from 'ng-dynamic-json-form';
+
+export const appConfig: ApplicationConfig = {
+  ...
+  providers: [
+    provideNgDynamicJsonForm({
+      customValidators: {
+        firstUppercase: firstUppercaseValidator,
+      }
+    }),
+  ]
+}
+```
+
+</doc-code>
+
+<doc-code name="JSON">
 
 ```json
 {
@@ -67,33 +125,16 @@ To use custom validators, set the `name` with value that match with the key insi
 ```
 
 </doc-code>
-<doc-code name="TS">
-
-```ts
-...
-@Component({...})
-export class YourComponent {
-  validators = {
-    firstUppercase: firstUppercaseValidator,
-  };
-}
-```
-
-</doc-code>
-<doc-code name="HTML">
 
-```html
-<ng-dynamic-json-form ... [customValidators]="validators"></ng-dynamic-json-form>
-```
-
-</doc-code>
 </doc-tab>
 
-### Provide custom validators globally
+## Async validators
 
-The custom validators can be provided in the providers, by using `provideNgDynamicJsonForm()` , to make it becomes available globally.
+The way to use async validators is same with [Custom validators](#custom-validators).
 
-<doc-code>
+<doc-tab>
+
+<doc-code name="app.config.ts">
 
 ```ts
 import { ApplicationConfig } from '@angular/core';
@@ -103,7 +144,7 @@ export const appConfig: ApplicationConfig = {
   ...
   providers: [
     provideNgDynamicJsonForm({
-      customValidators: {
+      customAsyncValidators: {
         firstUppercase: firstUppercaseValidator,
       }
     }),
@@ -112,3 +153,20 @@ export const appConfig: ApplicationConfig = {
 ```
 
 </doc-code>
+
+<doc-code name="JSON">
+
+```json
+{
+	...
+	"asyncValidators": [
+		{
+			"name": "firstUppercase"
+		}
+	]
+}
+```
+
+</doc-code>
+
+</doc-tab>
diff --git a/docs/assets/docs/v8/validators/validators_zh-TW.md b/docs/assets/docs/v8/validators/validators_zh-TW.md
@@ -4,6 +4,43 @@
 
 > `email` 驗證器使用的不是 `Validators.email` 而是 `Validators.pattern`: `/^[^@\s!(){}<>]+@[\w-]+(\.[A-Za-z]+)+$/`
 
+## 驗證器設定
+
+<doc-code>
+
+```json
+{
+  ...
+  "validators": [
+    {
+      "name": "...",
+      "value": "...",
+      "message": "..."
+    }
+  ],
+  "asyncValidators": [
+    // 同 "validators"
+    ...
+  ]
+}
+```
+
+<doc-code>
+
+### Properties
+
+#### name
+
+驗證器名稱。
+
+#### value
+
+若驗證器需要特定值來驗證，如 `min`, `max`，則需提供。
+
+#### message
+
+針對 Angular 的內建驗證器，設定自訂訊息。
+
 ## 加入驗證器
 
 只需提供 `validators` 即可加入驗證器。
@@ -27,7 +64,7 @@
 
 ### 需要值的驗證器
 
-有寫驗證器像是 `min`、`max` 需要帶入值，這時候只需提供 `value` 即可。
+一些驗證器像是 `min`、`max` 需要帶入值，這時候只需提供 `value` 即可。
 
 <doc-code>
 
@@ -50,10 +87,31 @@
 
 ## 自訂驗證器
 
-要使用自訂驗證器，`name` 欄位的值必須要對應得到 `customValidators` 內的 key。
+要使用自訂驗證器，先將驗證器加入 `provideNgDynamicJsonForm()` provider 內，然後，validators 設定的 `name` 需對應到 `customValidators` 的 key。
 
 <doc-tab>
-<doc-code name="Config">
+
+<doc-code name="app.config.ts">
+
+```ts
+import { ApplicationConfig } from '@angular/core';
+import { provideNgDynamicJsonForm } from 'ng-dynamic-json-form';
+
+export const appConfig: ApplicationConfig = {
+  ...
+  providers: [
+    provideNgDynamicJsonForm({
+      customValidators: {
+        firstUppercase: firstUppercaseValidator,
+      }
+    }),
+  ]
+}
+```
+
+</doc-code>
+
+<doc-code name="JSON">
 
 ```json
 {
@@ -67,33 +125,16 @@
 ```
 
 </doc-code>
-<doc-code name="TS">
-
-```ts
-...
-@Component({...})
-export class YourComponent {
-  validators = {
-    firstUppercase: firstUppercaseValidator,
-  };
-}
-```
-
-</doc-code>
-<doc-code name="HTML">
 
-```html
-<ng-dynamic-json-form ... [customValidators]="validators"></ng-dynamic-json-form>
-```
-
-</doc-code>
 </doc-tab>
 
-### 全域自訂驗證器
+## 自訂 Async 驗證器
 
-`provideNgDynamicJsonForm()` 內注入的自訂驗證器為全域可用。
+使用方法與 [自訂驗證器](#自訂驗證器) 相同。
 
-<doc-code>
+<doc-tab>
+
+<doc-code name="app.config.ts">
 
 ```ts
 import { ApplicationConfig } from '@angular/core';
@@ -103,7 +144,7 @@ export const appConfig: ApplicationConfig = {
   ...
   providers: [
     provideNgDynamicJsonForm({
-      customValidators: {
+      customAsyncValidators: {
         firstUppercase: firstUppercaseValidator,
       }
     }),
@@ -112,3 +153,20 @@ export const appConfig: ApplicationConfig = {
 ```
 
 </doc-code>
+
+<doc-code name="JSON">
+
+```json
+{
+	...
+	"asyncValidators": [
+		{
+			"name": "firstUppercase"
+		}
+	]
+}
+```
+
+</doc-code>
+
+</doc-tab>
diff --git a/docs/docs/conditions/conditions_en.md/index.html b/docs/docs/conditions/conditions_en.md/index.html
diff --git a/docs/docs/conditions/conditions_zh-TW.md/index.html b/docs/docs/conditions/conditions_zh-TW.md/index.html
diff --git a/docs/docs/configs/configs_en.md/index.html b/docs/docs/configs/configs_en.md/index.html
diff --git a/docs/docs/configs/configs_zh-TW.md/index.html b/docs/docs/configs/configs_zh-TW.md/index.html
diff --git a/docs/docs/custom-components/custom-components_en.md/index.html b/docs/docs/custom-components/custom-components_en.md/index.html
diff --git a/docs/docs/custom-components/custom-components_zh-TW.md/index.html b/docs/docs/custom-components/custom-components_zh-TW.md/index.html
diff --git a/docs/docs/custom-error/custom-error_en.md/index.html b/docs/docs/custom-error/custom-error_en.md/index.html
diff --git a/docs/docs/custom-error/custom-error_zh-TW.md/index.html b/docs/docs/custom-error/custom-error_zh-TW.md/index.html
diff --git a/docs/docs/custom-label/custom-label_en.md/index.html b/docs/docs/custom-label/custom-label_en.md/index.html
diff --git a/docs/docs/custom-label/custom-label_zh-TW.md/index.html b/docs/docs/custom-label/custom-label_zh-TW.md/index.html
diff --git a/docs/docs/custom-loading/custom-loading_en.md/index.html b/docs/docs/custom-loading/custom-loading_en.md/index.html
diff --git a/docs/docs/custom-loading/custom-loading_zh-TW.md/index.html b/docs/docs/custom-loading/custom-loading_zh-TW.md/index.html
diff --git a/docs/docs/form-component/form-component_en.md/index.html b/docs/docs/form-component/form-component_en.md/index.html
diff --git a/docs/docs/form-component/form-component_zh-TW.md/index.html b/docs/docs/form-component/form-component_zh-TW.md/index.html
diff --git a/docs/docs/getting-started/getting-started_en.md/index.html b/docs/docs/getting-started/getting-started_en.md/index.html
diff --git a/docs/docs/getting-started/getting-started_zh-TW.md/index.html b/docs/docs/getting-started/getting-started_zh-TW.md/index.html
diff --git a/docs/docs/index.html b/docs/docs/index.html
diff --git a/docs/docs/input-mask/input-mask_en.md/index.html b/docs/docs/input-mask/input-mask_en.md/index.html
diff --git a/docs/docs/input-mask/input-mask_zh-TW.md/index.html b/docs/docs/input-mask/input-mask_zh-TW.md/index.html
diff --git a/docs/docs/input-types/input-types_en.md/index.html b/docs/docs/input-types/input-types_en.md/index.html
diff --git a/docs/docs/input-types/input-types_zh-TW.md/index.html b/docs/docs/input-types/input-types_zh-TW.md/index.html
diff --git a/docs/docs/layout/layout_en.md/index.html b/docs/docs/layout/layout_en.md/index.html
diff --git a/docs/docs/layout/layout_zh-TW.md/index.html b/docs/docs/layout/layout_zh-TW.md/index.html
diff --git a/docs/docs/options/options_en.md/index.html b/docs/docs/options/options_en.md/index.html
diff --git a/docs/docs/options/options_zh-TW.md/index.html b/docs/docs/options/options_zh-TW.md/index.html
diff --git a/docs/docs/props/props_en.md/index.html b/docs/docs/props/props_en.md/index.html
diff --git a/docs/docs/props/props_zh-TW.md/index.html b/docs/docs/props/props_zh-TW.md/index.html
diff --git a/docs/docs/styling/styling_en.md/index.html b/docs/docs/styling/styling_en.md/index.html
diff --git a/docs/docs/styling/styling_zh-TW.md/index.html b/docs/docs/styling/styling_zh-TW.md/index.html
diff --git a/docs/docs/ui-components/ui-components_en.md/index.html b/docs/docs/ui-components/ui-components_en.md/index.html
diff --git a/docs/docs/ui-components/ui-components_zh-TW.md/index.html b/docs/docs/ui-components/ui-components_zh-TW.md/index.html
diff --git a/docs/docs/validators/validators_en.md/index.html b/docs/docs/validators/validators_en.md/index.html
diff --git a/docs/docs/validators/validators_zh-TW.md/index.html b/docs/docs/validators/validators_zh-TW.md/index.html
diff --git a/docs/index.html b/docs/index.html
diff --git a/docs/index.original.html b/docs/index.original.html
@@ -22,12 +22,12 @@
       })(window, document, "script", "dataLayer", "GTM-5S9NN57");
     </script>
     <!-- End Google Tag Manager -->
-  <style>@layer tailwind-base{*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}iframe{display:block;vertical-align:middle}*,:before,:after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }}@layer tailwind-utilities{@tailwind commponents}@layer primeng{}@media (min-width: 992px){body::-webkit-scrollbar{background-color:transparent;width:1.25rem;height:1.25rem}body::-webkit-scrollbar-thumb{background-color:gray;border-radius:1rem;background-clip:content-box;border:solid 8px transparent}body::-webkit-scrollbar-thumb:hover{border-width:7px}body::-webkit-scrollbar-corner{background-color:transparent}}:root{--primary-50:#f7f6ff;--primary-100:#efecff;--primary-200:#cfc7ff;--primary-300:#afa1ff;--primary-400:#8f7bff;--primary-500:#5f43ff;--primary-600:#4c36cc;--primary-700:#392899;--primary-800:#261b66;--primary-900:#130d33;--bg-color-rgb:255, 255, 255;--body-bg-color-rgb:255, 255, 255;--text-color-rgb:35, 35, 35;--body-bg-color:rgb(var(--body-bg-color-rgb));--code-bg-color:rgb(215, 215, 215);--border-color-25:rgba(128, 128, 128, .25);--border-color-35:rgba(128, 128, 128, .35);--border-color-50:rgba(128, 128, 128, .5);--page-max-width:100rem;--gutter-auto:calc(50% - var(--page-max-width) * .5)}html{font-family:Roboto,Noto Sans TC,Noto Sans SC,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}body{display:flex;min-height:100vh;flex-direction:column;background-color:var(--body-bg-color);color:rgb(var(--text-color-rgb))}@media (prefers-color-scheme: dark){:root:not(.light){--primary-900:#f7f6ff;--primary-800:#c7c3df;--primary-700:#afa9d1;--primary-600:#968ec2;--primary-500:#7d74b4;--primary-400:#6559a6;--primary-300:#4f4681;--primary-200:#38325d;--primary-100:#221e38;--primary-50:#0c0b14;--body-bg-color-rgb:25, 25, 35;--bg-color-rgb:40, 40, 40;--text-color-rgb:185, 185, 185;--code-bg-color:rgb(36, 36, 36)}}</style><link rel="stylesheet" href="styles.998cfc84ed78430b.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.998cfc84ed78430b.css"></noscript></head>
+  <style>@layer tailwind-base{*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}iframe{display:block;vertical-align:middle}*,:before,:after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }}@layer tailwind-utilities{@tailwind commponents}@layer primeng{}@media (min-width: 992px){body::-webkit-scrollbar{background-color:transparent;width:1.25rem;height:1.25rem}body::-webkit-scrollbar-thumb{background-color:gray;border-radius:1rem;background-clip:content-box;border:solid 8px transparent}body::-webkit-scrollbar-thumb:hover{border-width:7px}body::-webkit-scrollbar-corner{background-color:transparent}}:root{--primary-50:#f7f6ff;--primary-100:#efecff;--primary-200:#cfc7ff;--primary-300:#afa1ff;--primary-400:#8f7bff;--primary-500:#5f43ff;--primary-600:#4c36cc;--primary-700:#392899;--primary-800:#261b66;--primary-900:#130d33;--bg-color-rgb:255, 255, 255;--body-bg-color-rgb:255, 255, 255;--text-color-rgb:35, 35, 35;--body-bg-color:rgb(var(--body-bg-color-rgb));--code-bg-color:rgb(215, 215, 215);--border-color-25:rgba(128, 128, 128, .25);--border-color-35:rgba(128, 128, 128, .35);--border-color-50:rgba(128, 128, 128, .5);--page-max-width:100rem;--gutter-auto:calc(50% - var(--page-max-width) * .5)}html{font-family:Roboto,Noto Sans TC,Noto Sans SC,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}body{display:flex;min-height:100vh;flex-direction:column;background-color:var(--body-bg-color);color:rgb(var(--text-color-rgb))}@media (prefers-color-scheme: dark){:root:not(.light){--primary-900:#f7f6ff;--primary-800:#c7c3df;--primary-700:#afa9d1;--primary-600:#968ec2;--primary-500:#7d74b4;--primary-400:#6559a6;--primary-300:#4f4681;--primary-200:#38325d;--primary-100:#221e38;--primary-50:#0c0b14;--body-bg-color-rgb:25, 25, 35;--bg-color-rgb:40, 40, 40;--text-color-rgb:185, 185, 185;--code-bg-color:rgb(36, 36, 36)}}</style><link rel="stylesheet" href="styles.00d9aee9da59b474.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.00d9aee9da59b474.css"></noscript></head>
   <body>
     <!-- Google Tag Manager (noscript) -->
     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5S9NN57" height="0" width="0" style="display: none; visibility: hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
 
     <app-root></app-root>
-  <script src="runtime.650724864fa0e7ea.js" type="module"></script><script src="polyfills.cdffba540aee9982.js" type="module"></script><script src="scripts.a40176a5d795c96d.js" defer></script><script src="main.9a2441245c8c6f83.js" type="module"></script></body>
+  <script src="runtime.77f51edee8227ba4.js" type="module"></script><script src="polyfills.cdffba540aee9982.js" type="module"></script><script src="scripts.a40176a5d795c96d.js" defer></script><script src="main.e9da1f7cf48c19d8.js" type="module"></script></body>
 </html>
diff --git a/docs/main.9a2441245c8c6f83.js b/docs/main.9a2441245c8c6f83.js
diff --git a/docs/main.e9da1f7cf48c19d8.js b/docs/main.e9da1f7cf48c19d8.js
diff --git a/docs/playground/index.html b/docs/playground/index.html