Merge pull request #144 from erqk/v8

V8

CHANGELOG.md

@@ -1,3 +1,89 @@
+# 8.4.0 (2024-09-23)
+
+[129166c]: https://github.com/erqk/ng-dynamic-json-form/commit/129166c7900e41c666ad50abcca8ebfa03464d1d
+
+| Commit    | Type | Description                                                   |
+| --------- | ---- | ------------------------------------------------------------- |
+| [129166c] | feat | Add host form access to custom component and custom template. |
+
+# 8.3.9 (2024-09-19)
+
+[b3db23e]: https://github.com/erqk/ng-dynamic-json-form/commit/b3db23ece1a93aab062ef48df1f406295aa8e34d
+
+| Commit    | Type | Description                                      |
+| --------- | ---- | ------------------------------------------------ |
+| [b3db23e] | fix  | Toggle control visibility before disable status. |
+
+# 8.3.8 (2024-09-19)
+
+[c1ce2bd]: https://github.com/erqk/ng-dynamic-json-form/commit/c1ce2bd16a0e662b720d1d87e03133d5e207d2d9
+[c587af7]: https://github.com/erqk/ng-dynamic-json-form/commit/c587af7005bdd385bd94f1387c61ea4d180ab268
+[d0c42de]: https://github.com/erqk/ng-dynamic-json-form/commit/d0c42de84669c8facc9ecd98128ca6e2379ca26e
+
+| Commit    | Type | Description                                                              |
+| --------- | ---- | ------------------------------------------------------------------------ |
+| [c1ce2bd] | fix  | Allow `null` or `""` value to be matched when finding `ValidatorConfig`. |
+| [c587af7] | fix  | Should use `continue` instead of `return`.                               |
+| [d0c42de] | fix  | Change the way to hide element.                                          |
+
+# 8.3.7 (2024-09-13)
+
+[c1a14fa]: https://github.com/erqk/ng-dynamic-json-form/commit/c1a14fa8f26dcb9d8156c7ff28614f7d4cf8a783
+
+| Commit    | Type  | Description                                                        |
+| --------- | ----- | ------------------------------------------------------------------ |
+| [c1a14fa] | chore | Remove the usage of `debounceTime()` and `distinctUntilChanged()`. |
+
+# 8.3.6 (2024-09-12)
+
+[90585dd]: https://github.com/erqk/ng-dynamic-json-form/commit/90585dd14722b99ef332201b4ab55360d1ce2ab7
+
+| Commit    | Type | Description                                             |
+| --------- | ---- | ------------------------------------------------------- |
+| [90585dd] | fix  | @Output() optionsLoaded not fired in the correct order. |
+
+# 8.3.5 (2024-09-12)
+
+[03a4568]: https://github.com/erqk/ng-dynamic-json-form/commit/03a4568383fa69562862e229a0a7e5fc3db01a62
+
+| Commit    | Type | Description                           |
+| --------- | ---- | ------------------------------------- |
+| [03a4568] | fix  | Fail to toggle control disable state. |
+
+# 8.3.4 (2024-09-12)
+
+[f7d10d9]: https://github.com/erqk/ng-dynamic-json-form/commit/f7d10d990f2fd5d984069f287a98aecb7a3c327c
+
+| Commit    | Type | Description                           |
+| --------- | ---- | ------------------------------------- |
+| [f7d10d9] | fix  | Fail to toggle control disable state. |
+
+# 8.3.3 (2024-09-12)
+
+[25c20ab]: https://github.com/erqk/ng-dynamic-json-form/commit/25c20ab63f61eb7cde6aac285f3c7cfcb389fa80
+
+| Commit    | Type | Description                       |
+| --------- | ---- | --------------------------------- |
+| [25c20ab] | fix  | The disabled status is incorrect. |
+
+# 8.3.2 (2024-09-11)
+
+[3b68200]: https://github.com/erqk/ng-dynamic-json-form/commit/3b68200e7233ba137c4f6630db072c33ef44f247
+
+| Commit    | Type        | Description                                            |
+| --------- | ----------- | ------------------------------------------------------ |
+| [3b68200] | improvement | Remove the usage of debounceTime() to cancel flickers. |
+
+# 8.3.1 (2024-09-11)
+
+[3b60da8]: https://github.com/erqk/ng-dynamic-json-form/commit/3b60da86d5cf6b6696b2f0c671f9426c1cc70c7a
+[ad3c7b9]: https://github.com/erqk/ng-dynamic-json-form/commit/ad3c7b917e373f2f6610398991be131919e5ad7e
+
+| Commit    | Type | Description                      |
+| --------- | ---- | -------------------------------- |
+| [3b60da8] | fix  | Check for valid result.          |
+| [ad3c7b9] | test | Add test for OptionsDataService. |
+
 # 8.3.0 (2024-09-10)
 
 [047953c]: https://github.com/erqk/ng-dynamic-json-form/commit/047953ce1c6ee6453618a1d4d72fd682115d8b14

docs/assets/docs/index.md

@@ -2,28 +2,3 @@
 
 - [English](./v8/index_en.md)
 - [繁中](./v8/index_zh-TW.md)
-
-## 5.8.4
-
-- [English](./v5/index_en.md)
-- [繁中](./v5/index_zh-TW.md)
-
-## 4.0.5 (deprecated)
-
-- [English](./v4/index_en.md)
-- [繁中](./v4/index_zh-TW.md)
-
-## 3.4.1 (deprecated)
-
-- [English](./v3/index_en.md)
-- [繁中](./v3/index_zh-TW.md)
-
-## 2.0.1 (deprecated)
-
-- [English](./v2/index_en.md)
-- [繁中](./v2/index_zh-TW.md)
-
-## 1.0.11 (deprecated)
-
-- [English](./v1/index_en.md)
-- [繁中](./v1/index_zh-TW.md)

docs/assets/docs/v8/custom-components/custom-components_en.md

@@ -154,6 +154,10 @@ The control to bind with the view and connect with the parent form. Can be assig
 
 The config for this component.
 
+#### hostForm
+
+The `UntypedFormGroup` of the current `ng-dynamic-json-form` instance.
+
 #### hideErrorMessage
 
 The `hideErrorMessage` value from root component. This is useful to control the visibility of errors.
@@ -220,8 +224,9 @@ Sometimes, if creating a component is way too much, we can use ng-template.
 
 The variables available for the ng-template are:
 
-| Name             | Type              | Description                                          |
-| ---------------- | ----------------- | ---------------------------------------------------- |
-| control          | AbstractControl   | The FormControl for this input.                      |
-| data             | FormControlConfig | The config for this input.                           |
-| hideErrorMessage | boolean           | The value of `hideErrorMessage` from root component. |
+| Name             | Type              | Description                                                   |
+| ---------------- | ----------------- | ------------------------------------------------------------- |
+| control          | AbstractControl   | The FormControl for this input.                               |
+| data             | FormControlConfig | The config for this input.                                    |
+| hostForm         | UntypedFormGroup  | The FormGroup of the current `ng-dynamic-json-form` instance. |
+| hideErrorMessage | boolean           | The value of `hideErrorMessage` from root component.          |

docs/assets/docs/v8/custom-components/custom-components_zh-TW.md

@@ -154,6 +154,10 @@ export class AppComponent {
 
 此元件的設定。
 
+#### hostForm
+
+此 `ng-dynamic-json-form` 實體的表單 (`UntypedFormGroup`)。
+
 #### hideErrorMessage
 
 父元件的 `hideErrorMessage` 的值。可用來控制錯誤訊息的顯示。
@@ -224,8 +228,9 @@ setErrors(errors: ValidationErrors | null): void {}
 
 ng-template 可用的變數如下：
 
-| 名稱             | 類型              | 說明                               |
-| ---------------- | ----------------- | ---------------------------------- |
-| control          | AbstractControl   | 此欄位的 FormControl。             |
-| data             | FormControlConfig | 此欄位的設定。                     |
-| hideErrorMessage | boolean           | 父元件的 `hideErrorMessage` 的值。 |
+| 名稱             | 類型              | 說明                                         |
+| ---------------- | ----------------- | -------------------------------------------- |
+| control          | AbstractControl   | 此欄位的 FormControl。                       |
+| data             | FormControlConfig | 此欄位的設定。                               |
+| hostForm         | UntypedFormGroup  | 此 `ng-dynamic-json-form` 實體的 FormGroup。 |
+| hideErrorMessage | boolean           | 父元件的 `hideErrorMessage` 的值。           |

docs/docs/conditions/conditions_en.md/index.html

@@ -190,6 +190,6 @@ <h3 id="multiple-conditions">Multiple conditions</h3>
 <p><a title="Layout" routerlink href="docs/layout/layout_en.md">Layout</a></p>
 <p><a title="Styling" routerlink href="docs/styling/styling_en.md">Styling</a></p>
 </div></app-navigator-index></div><button _ngcontent-ng-c3809031132 type="button" class="ng-tns-c3809031132-1 fixed z-[1002] bottom-12 left-8 flex lg:hidden items-center justify-center h-16 w-16 bg-[var(--primary-500)] text-white text-lg !rounded-full shadow-[rgba(0,0,0,0.5)] shadow-xl"><i _ngcontent-ng-c3809031132 class="bi bi-layout-text-sidebar mb-1 ng-tns-c3809031132-1"></i></button></div></app-page-docs><!----></div></div></app-root>
-  <script src="runtime.7cb7307cac278548.js" type="module"></script><script src="polyfills.7632219380094246.js" type="module"></script><script src="scripts.a40176a5d795c96d.js" defer></script><script src="main.616b58e43414a288.js" type="module"></script>
+  <script src="runtime.4e477b077c7f8e40.js" type="module"></script><script src="polyfills.7632219380094246.js" type="module"></script><script src="scripts.a40176a5d795c96d.js" defer></script><script src="main.36bcbf2393d451b7.js" type="module"></script>
 
 <script id="ng-state" type="application/json">{"assets/i18n/en.json":{"FEATURES":{"CONDITIONS":"Toggle control status (hidden or disabled) and validators depends on value from other control","CUSTOM_COMPONENTS":"Support custom components","LAYOUT":"Flexible form layout","NESTED_LEVELS":"Create form with unlimited nesting level","VALIDATORS":"Supports Angular built in validators and custom validators","UI_LIBRARY":"Support third party UI libraries"},"GET_STARTED":"Getting started","INTRODUCTION":{"BRIEF":"Generate Angular reactive form dynamically using JSON"},"MENU":{"DOCS":"Docs","PLAYGROUND":"Playground"},"PLAYGROUND":{"TABS":{"CONFIGS":"Configs","FORM":"Form","VALUE":"Value / Errors"},"TEMPLATE":{"NEW":"New"}}},"assets/docs/v8/conditions/conditions_en.md":"# Conditions\r\n\r\nThe conditions will let user to :\r\n\r\n- toggle control’s validators\r\n- toggle control’s visibility\r\n- toggle control’s disabled state\r\n- execute custom function\r\n\r\nThe following example demonstrates the text input is hidden when the checkbox is unchecked.\r\n\r\n\u003Cdoc-form-viewer config-path=\"CONDITIONS_VISIBILITY.EN\">\u003C/doc-form-viewer>\r\n\r\n## Syntax\r\n\r\nThe `conditions` is build up by `NAME`, `GROUP_OPERATOR` and a tupple of `[CONTROL_PATH, OPERATOR, VALUE]`.\r\n\r\n```ts\r\n{\r\n    ...\r\n    \"conditions\": {\r\n      NAME: {\r\n        GROUP_OPERATOR: [\r\n          [CONTROL_PATH, OPERATOR, VALUE]\r\n        ]\r\n      }\r\n    }\r\n  }\r\n```\r\n\r\n### NAME\r\n\r\nThe available `NAME` are listed as below.\r\n\r\n#### Built-in validators\r\n\r\n- `validator.required`\r\n- `validator.requiredTrue`\r\n- `validator.min`\r\n- `validator.max`\r\n- `validator.minLength`\r\n- `validator.maxLength`\r\n- `validator.email`\r\n- `validator.pattern`\r\n\r\n#### Control state\r\n\r\n- `control.disabled`\r\n- `control.hidden`\r\n\r\n#### Custom validator\r\n\r\n- `validators.` + `name`\r\n\r\n#### Custom action\r\n\r\n- Any string that match with the key inside `conditionsActionFuntions`.\r\n\r\n### GROUP_OPERATOR\r\n\r\n`&&`, `||`\r\n\r\nThis is required for every key inside `conditions`. GROUP_OPERATOR accepts tupple or nested GROUP_OPERATOR.\r\n\r\n> Only provide `&&` or `||` at one time. If both are present, only `&&` will be chosen.\r\n\r\n### LEFT, OPERATOR, RIGHT\r\n\r\nThe tupple `[LEFT, OPERATOR, RIGHT]` acts as the `if` statement:\r\n\r\n```tsx\r\n// [\"controlA\", \"===\", \"foo\"]\r\nif (controlA.value === \"foo\") {...}\r\n\r\n// [\"controlA,prop1\", \"===\", \"foo\"]\r\nif (controlA.value.prop1 === \"foo\") {...}\r\n\r\n// [\"groupA.controlA\", \"===\", \"foo\"]\r\nif (groupA.controls.controlA.value === \"foo\") {...}\r\n\r\n// [\"bar\", \"!==\", \"controlB\"]\r\nif (controlB.value !== \"bar\") {...}\r\n```\r\n\r\nThe `OPERATOR` accepts:\r\n\r\n- `===`\r\n- `!==`\r\n- `>=`\r\n- `\u003C=`\r\n- `>`\r\n- `\u003C`\r\n- `includes`\r\n- `notIncludes`\r\n\r\n## Execute custom function\r\n\r\nProvide `conditionsActionFuntions` with key and function pairs. When the condition met, the corresponding function will be executed.\r\n\r\n\u003Cdoc-tab>\r\n\r\n\u003Cdoc-code name=\"HTML\">\r\n\r\n\u003C!-- prettier-ignore -->\r\n```html\r\n\u003Cng-dynamic-json-form\r\n  [configs]=\"configs\"\r\n  [conditionsActionFuntions]=\"customActions\"\r\n>\u003C/ng-dynamic-json-form>\r\n```\r\n\r\n\u003C/doc-code>\r\n\r\n\u003Cdoc-code name=\"TS\">\r\n\r\n```tsx\r\nconfigs = [\r\n  {\r\n    ...\r\n    \"conditions\": {\r\n      \"doA\": {\r\n        \"&&\": [...]\r\n      },\r\n      \"doB\": {\r\n        \"&&\": [...]\r\n      }\r\n    }\r\n  }\r\n];\r\n\r\ncustomActions = {\r\n  doA: () => this._actionA,\r\n  doB: () => this._actionB\r\n}\r\n\r\nprivate _actionA(): void {\r\n  ...\r\n}\r\n\r\nprivate _actionB(): void {\r\n  ...\r\n}\r\n```\r\n\r\n\u003C/doc-code>\r\n\r\n\u003C/doc-tab>\r\n\r\n## Example\r\n\r\n### Toggle visibility\r\n\r\n\u003Cdoc-form-viewer config-path=\"CONDITIONS_VISIBILITY.EN\">\u003C/doc-form-viewer>\r\n\r\n### Toggle validators\r\n\r\nTo toggle validators, they must exists inside `validators`.\r\n\r\n\u003Cdoc-form-viewer config-path=\"CONDITIONS_VALIDATOR.EN\">\u003C/doc-form-viewer>\r\n\r\n### Multiple conditions\r\n\r\n\u003Cdoc-form-viewer config-path=\"CONDITIONS_MULTIPLE.EN\">\u003C/doc-form-viewer>\r\n","assets/docs/v8/index_en.md":"[Getting Started](../v8/getting-started/getting-started_en.md)\r\n\r\n[Configs](../v8/configs/configs_en.md)\r\n\r\n[Form Component](../v8/form-component/form-component_en.md)\r\n\r\n[Input Types](../v8/input-types/input-types_en.md)\r\n\r\n[Input Mask](../v8/input-mask/input-mask_en.md)\r\n\r\n[Validators](../v8/validators/validators_en.md)\r\n\r\n[Conditions](../v8/conditions/conditions_en.md)\r\n\r\n[Options](../v8/options/options_en.md)\r\n\r\n[Props](../v8/props/props_en.md)\r\n\r\n[Custom Components](../v8/custom-components/custom-components_en.md)\r\n\r\n[UI Components](../v8/ui-components/ui-components_en.md)\r\n\r\n[Custom Label](../v8/custom-label/custom-label_en.md)\r\n\r\n[Custom Error](../v8/custom-error/custom-error_en.md)\r\n\r\n[Custom Loading](../v8/custom-loading/custom-loading_en.md)\r\n\r\n[Layout](../v8/layout/layout_en.md)\r\n\r\n[Styling](../v8/styling/styling_en.md)\r\n"}</script></body></html>