Merge pull request #151 from erqk/v8

V8

Author: erqk

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": "explicit"
+  }
+}

CHANGELOG.md

@@ -1,3 +1,11 @@
+# 8.5.0 (2024-10-14)
+
+[aee0865]: https://github.com/erqk/ng-dynamic-json-form/commit/aee08654eb545081a88d74fbe98da91483706631
+
+| Commit    | Type | Description                   |
+| --------- | ---- | ----------------------------- |
+| [aee0865] | feat | Add `onChange` event emitter. |
+
 # 8.4.8 (2024-09-27)
 
 [d0b36b0]: https://github.com/erqk/ng-dynamic-json-form/commit/d0b36b0c3c2dbefe1834903cbbe0a2a1eac62338

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

@@ -223,6 +223,11 @@ export class NgDynamicJsonFormComponent
   @Input() optionsSources?: { [key: string]: Observable<OptionItem[]> };
 
   @Output() formGet = new EventEmitter<UntypedFormGroup>();
+  /**
+   * The value change event of the form, which trigger by the user
+   * (by checking click or keydown event)
+   */
+  @Output() onChange = new EventEmitter<any>();
   @Output() optionsLoaded = new EventEmitter();
   @Output() displayValue = new EventEmitter<FormDisplayValue>();
   @Output() updateStatusFunctions = new EventEmitter<FormStatusFunctions>();
@@ -393,15 +398,9 @@ export class NgDynamicJsonFormComponent
       tap(() => this._onTouched())
     );
 
-    const allowDirtyState$ = merge(
-      event$('focusin'),
-      event$('click'),
-      event$('keydown')
-    ).pipe(
+    const allowDirtyState$ = merge(event$('click'), event$('keydown')).pipe(
       take(1),
-      tap(() => {
-        this._allowFormDirty = true;
-      })
+      tap(() => (this._allowFormDirty = true))
     );
 
     merge(allowDirtyState$, onTouched$, conditions$, valueChanges$)
@@ -477,6 +476,10 @@ export class NgDynamicJsonFormComponent
       markFormPristine(this.form);
     };
 
+    if (this._allowFormDirty) {
+      this.onChange.emit(this.form?.value);
+    }
+
     setErrors();
     updateValue();
     updateDisplayValue();

lib/package.json

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

src/assets/docs/v8/form-component/form-component_en.md

@@ -124,6 +124,10 @@ See [Custom Loading](../../v8/custom-loading/custom-loading_en.md).
 
 The event called after form generation complete. The generated `UntypedFormGroup` will be emitted.
 
+### onChange
+
+The event of form value when it's changed by user.
+
 ### optionsLoaded
 
 The event called after all of the options are loaded.

src/assets/docs/v8/form-component/form-component_zh-TW.md

@@ -124,6 +124,10 @@ submit(): void {
 
 當表單生成完畢時觸發的事件，並將生成的 `UntypeFormGroup` 發送出去。
 
+### onChange
+
+用戶行為導致的表單的值變化事件。
+
 ### optionsLoaded
 
 當所有選項載入完成後觸發。