From 1adc27f85c1c40669042a033bf7fe311e95e710c Mon Sep 17 00:00:00 2001
From: erdemcaygor <erdem.caygor@gmail.com>
Date: Mon, 6 Oct 2025 17:15:55 +0300
Subject: [PATCH 01/25] dynamic form component init

---
 npm/ng-packs/packages/components/dynamic-form/README.md    | 3 +++
 .../packages/components/dynamic-form/ng-package.json       | 5 +++++
 npm/ng-packs/packages/components/dynamic-form/src/index.ts | 1 +
 .../components/dynamic-form/src/lib/dynamic-form.module.ts | 7 +++++++
 npm/ng-packs/packages/components/tsconfig.lib.json         | 2 +-
 npm/ng-packs/tsconfig.base.json                            | 1 +
 6 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 npm/ng-packs/packages/components/dynamic-form/README.md
 create mode 100644 npm/ng-packs/packages/components/dynamic-form/ng-package.json
 create mode 100644 npm/ng-packs/packages/components/dynamic-form/src/index.ts
 create mode 100644 npm/ng-packs/packages/components/dynamic-form/src/lib/dynamic-form.module.ts

diff --git a/npm/ng-packs/packages/components/dynamic-form/README.md b/npm/ng-packs/packages/components/dynamic-form/README.md
new file mode 100644
index 0000000000..b827823f31
--- /dev/null
+++ b/npm/ng-packs/packages/components/dynamic-form/README.md
@@ -0,0 +1,3 @@
+# @abp/ng.components/dynamic-form
+
+Secondary entry point of `@abp/ng.components`. It can be used by importing from `@abp/ng.components/dynamic-form`.
diff --git a/npm/ng-packs/packages/components/dynamic-form/ng-package.json b/npm/ng-packs/packages/components/dynamic-form/ng-package.json
new file mode 100644
index 0000000000..c781f0df46
--- /dev/null
+++ b/npm/ng-packs/packages/components/dynamic-form/ng-package.json
@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/index.ts b/npm/ng-packs/packages/components/dynamic-form/src/index.ts
new file mode 100644
index 0000000000..c8ef4caca8
--- /dev/null
+++ b/npm/ng-packs/packages/components/dynamic-form/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/dynamic-form.module';
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/lib/dynamic-form.module.ts b/npm/ng-packs/packages/components/dynamic-form/src/lib/dynamic-form.module.ts
new file mode 100644
index 0000000000..de647527c6
--- /dev/null
+++ b/npm/ng-packs/packages/components/dynamic-form/src/lib/dynamic-form.module.ts
@@ -0,0 +1,7 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  imports: [CommonModule],
+})
+export class DynamicFormModule {}
diff --git a/npm/ng-packs/packages/components/tsconfig.lib.json b/npm/ng-packs/packages/components/tsconfig.lib.json
index 22d2695db8..478ba03368 100644
--- a/npm/ng-packs/packages/components/tsconfig.lib.json
+++ b/npm/ng-packs/packages/components/tsconfig.lib.json
@@ -10,6 +10,6 @@
     "lib": ["dom", "es2020"],
     "useDefineForClassFields": false
   },
-  "exclude": ["src/test-setup.ts", "**/*.spec.ts", "jest.config.ts"],
+  "exclude": ["test-setup.ts", "**/*.spec.ts", "jest.config.ts"],
   "include": ["**/*.ts"]
 }
diff --git a/npm/ng-packs/tsconfig.base.json b/npm/ng-packs/tsconfig.base.json
index f863f18520..f24e108aef 100644
--- a/npm/ng-packs/tsconfig.base.json
+++ b/npm/ng-packs/tsconfig.base.json
@@ -21,6 +21,7 @@
       "@abp/ng.account/config": ["packages/account/config/src/public-api.ts"],
       "@abp/ng.components": ["packages/components/src/public-api.ts"],
       "@abp/ng.components/chart.js": ["packages/components/chart.js/src/public-api.ts"],
+      "@abp/ng.components/dynamic-form": ["packages/components/dynamic-form/src/index.ts"],
       "@abp/ng.components/extensible": ["packages/components/extensible/src/public-api.ts"],
       "@abp/ng.components/page": ["packages/components/page/src/public-api.ts"],
       "@abp/ng.components/tree": ["packages/components/tree/src/public-api.ts"],

From fe26f7130e082b4182be4f7fdbc4f8ab00bb9369 Mon Sep 17 00:00:00 2001
From: erdemcaygor <erdem.caygor@gmail.com>
Date: Mon, 6 Oct 2025 17:59:55 +0300
Subject: [PATCH 02/25] refactoring

---
 .../packages/components/dynamic-form/ng-package.json      | 3 ++-
 .../components/dynamic-form/src/dynamic-form.component.ts | 8 ++++++++
 .../packages/components/dynamic-form/src/index.ts         | 1 -
 .../dynamic-form/src/lib/dynamic-form.module.ts           | 7 -------
 .../packages/components/dynamic-form/src/public-api.ts    | 1 +
 npm/ng-packs/tsconfig.base.json                           | 2 +-
 6 files changed, 12 insertions(+), 10 deletions(-)
 create mode 100644 npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
 delete mode 100644 npm/ng-packs/packages/components/dynamic-form/src/index.ts
 delete mode 100644 npm/ng-packs/packages/components/dynamic-form/src/lib/dynamic-form.module.ts
 create mode 100644 npm/ng-packs/packages/components/dynamic-form/src/public-api.ts

diff --git a/npm/ng-packs/packages/components/dynamic-form/ng-package.json b/npm/ng-packs/packages/components/dynamic-form/ng-package.json
index c781f0df46..e09fb3fd03 100644
--- a/npm/ng-packs/packages/components/dynamic-form/ng-package.json
+++ b/npm/ng-packs/packages/components/dynamic-form/ng-package.json
@@ -1,5 +1,6 @@
 {
+  "$schema": "../../../node_modules/ng-packagr/ng-entrypoint.schema.json",
   "lib": {
-    "entryFile": "src/index.ts"
+    "entryFile": "src/public-api.ts"
   }
 }
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
new file mode 100644
index 0000000000..1f3dc53da4
--- /dev/null
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
@@ -0,0 +1,8 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: 'lib-dynamic-form',
+  template: ``
+})
+
+export class DynamicFormComponent {}
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/index.ts b/npm/ng-packs/packages/components/dynamic-form/src/index.ts
deleted file mode 100644
index c8ef4caca8..0000000000
--- a/npm/ng-packs/packages/components/dynamic-form/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './lib/dynamic-form.module';
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/lib/dynamic-form.module.ts b/npm/ng-packs/packages/components/dynamic-form/src/lib/dynamic-form.module.ts
deleted file mode 100644
index de647527c6..0000000000
--- a/npm/ng-packs/packages/components/dynamic-form/src/lib/dynamic-form.module.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-@NgModule({
-  imports: [CommonModule],
-})
-export class DynamicFormModule {}
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/public-api.ts b/npm/ng-packs/packages/components/dynamic-form/src/public-api.ts
new file mode 100644
index 0000000000..38ece63528
--- /dev/null
+++ b/npm/ng-packs/packages/components/dynamic-form/src/public-api.ts
@@ -0,0 +1 @@
+export * from './dynamic-form.component';
diff --git a/npm/ng-packs/tsconfig.base.json b/npm/ng-packs/tsconfig.base.json
index f24e108aef..0adc8db800 100644
--- a/npm/ng-packs/tsconfig.base.json
+++ b/npm/ng-packs/tsconfig.base.json
@@ -21,7 +21,7 @@
       "@abp/ng.account/config": ["packages/account/config/src/public-api.ts"],
       "@abp/ng.components": ["packages/components/src/public-api.ts"],
       "@abp/ng.components/chart.js": ["packages/components/chart.js/src/public-api.ts"],
-      "@abp/ng.components/dynamic-form": ["packages/components/dynamic-form/src/index.ts"],
+      "@abp/ng.components/dynamic-form": ["packages/components/dynamic-form/src/public-api.ts"],
       "@abp/ng.components/extensible": ["packages/components/extensible/src/public-api.ts"],
       "@abp/ng.components/page": ["packages/components/page/src/public-api.ts"],
       "@abp/ng.components/tree": ["packages/components/tree/src/public-api.ts"],

From e8ced7075f053307e8bd6e3eaecba02761eacc27 Mon Sep 17 00:00:00 2001
From: erdemcaygor <erdem.caygor@gmail.com>
Date: Mon, 6 Oct 2025 23:37:45 +0300
Subject: [PATCH 03/25] refactoring

---
 npm/ng-packs/packages/components/dynamic-form/README.md  | 3 ---
 .../dynamic-form/src/dynamic-form-field.component.ts     | 9 +++++++++
 .../dynamic-form/src/dynamic-form.component.ts           | 7 ++++---
 .../components/dynamic-form/src/dynamic-form.models.ts   | 0
 .../components/dynamic-form/src/dynamic-form.service.ts  | 8 ++++++++
 5 files changed, 21 insertions(+), 6 deletions(-)
 delete mode 100644 npm/ng-packs/packages/components/dynamic-form/README.md
 create mode 100644 npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field.component.ts
 create mode 100644 npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.models.ts
 create mode 100644 npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.service.ts

diff --git a/npm/ng-packs/packages/components/dynamic-form/README.md b/npm/ng-packs/packages/components/dynamic-form/README.md
deleted file mode 100644
index b827823f31..0000000000
--- a/npm/ng-packs/packages/components/dynamic-form/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# @abp/ng.components/dynamic-form
-
-Secondary entry point of `@abp/ng.components`. It can be used by importing from `@abp/ng.components/dynamic-form`.
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field.component.ts
new file mode 100644
index 0000000000..63875e5507
--- /dev/null
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field.component.ts
@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'abp-dynamic-form-field',
+  template: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+
+export class DynamicFormFieldComponent {}
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
index 1f3dc53da4..725f559e05 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
@@ -1,8 +1,9 @@
-import { Component } from "@angular/core";
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
-  selector: 'lib-dynamic-form',
-  template: ``
+  selector: 'abp-dynamic-form',
+  template: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 
 export class DynamicFormComponent {}
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.models.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.models.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.service.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.service.ts
new file mode 100644
index 0000000000..0653dd5e5e
--- /dev/null
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.service.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DynamicFormFieldService {
+  // Add any shared logic for dynamic form fields here if needed in the future
+}

From 753350d150ef8a0bca1399bf24b4509fb3db7ea9 Mon Sep 17 00:00:00 2001
From: erdemcaygor <erdem.caygor@gmail.com>
Date: Tue, 7 Oct 2025 13:45:01 +0300
Subject: [PATCH 04/25] refactoring

---
 .../src/dynamic-form-field.component.ts       |   9 --
 .../dynamic-form-field-control.ts             |  75 ++++++++++
 .../dynamic-form-field.component.html         |  99 ++++++++++++++
 .../dynamic-form-field.component.ts           |  56 ++++++++
 .../src/dynamic-form-field/index.ts           |   1 +
 .../src/dynamic-form.component.ts             | 129 +++++++++++++++++-
 .../dynamic-form/src/dynamic-form.models.ts   |  27 ++++
 .../dynamic-form/src/dynamic-form.service.ts  |  56 +++++++-
 .../components/dynamic-form/src/public-api.ts |   1 +
 9 files changed, 438 insertions(+), 15 deletions(-)
 delete mode 100644 npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field.component.ts
 create mode 100644 npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field-control.ts
 create mode 100644 npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
 create mode 100644 npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
 create mode 100644 npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/index.ts

diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field.component.ts
deleted file mode 100644
index 63875e5507..0000000000
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field.component.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-
-@Component({
-  selector: 'abp-dynamic-form-field',
-  template: ``,
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-
-export class DynamicFormFieldComponent {}
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field-control.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field-control.ts
new file mode 100644
index 0000000000..3a87454884
--- /dev/null
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field-control.ts
@@ -0,0 +1,75 @@
+
+import {Observable} from 'rxjs';
+import {AbstractControlDirective, NgControl} from '@angular/forms';
+import {Directive} from '@angular/core';
+
+@Directive()
+export abstract class MatFormFieldControl<T> {
+  /** The value of the control. */
+  value: T | null;
+
+  /**
+   * Stream that emits whenever the state of the control changes such that the parent `MatFormField`
+   * needs to run change detection.
+   */
+  readonly stateChanges: Observable<void>;
+
+  /** The element ID for this control. */
+  readonly id: string;
+
+  /** The placeholder for this control. */
+  readonly placeholder: string;
+
+  /** Gets the AbstractControlDirective for this control. */
+  readonly ngControl: NgControl | AbstractControlDirective | null;
+
+  /** Whether the control is focused. */
+  readonly focused: boolean;
+
+  /** Whether the control is empty. */
+  readonly empty: boolean;
+
+  /** Whether the control is required. */
+  readonly required: boolean;
+
+  /** Whether the control is disabled. */
+  readonly disabled: boolean;
+
+  /** Whether the control is in an error state. */
+  readonly errorState: boolean;
+
+  /**
+   * An optional name for the control type that can be used to distinguish `mat-form-field` elements
+   * based on their control type. The form field will add a class,
+   * `mat-form-field-type-{{controlType}}` to its root element.
+   */
+  readonly controlType?: string;
+
+  /**
+   * Whether the input is currently in an autofilled state. If property is not present on the
+   * control it is assumed to be false.
+   */
+  readonly autofilled?: boolean;
+
+  /**
+   * Value of `aria-describedby` that should be merged with the described-by ids
+   * which are set by the form-field.
+   */
+  readonly userAriaDescribedBy?: string;
+
+  /**
+   * Whether to automatically assign the ID of the form field as the `for` attribute
+   * on the `<label>` inside the form field. Set this to true to prevent the form
+   * field from associating the label with non-native elements.
+   */
+  readonly disableAutomaticLabeling?: boolean;
+
+  /** Gets the list of element IDs that currently describe this control. */
+  readonly describedByIds?: string[];
+
+  /** Sets the list of element IDs that currently describe this control. */
+  abstract setDescribedByIds(ids: string[]): void;
+
+  /** Handles a click on the control's container. */
+  abstract onContainerClick(event: MouseEvent): void;
+}
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
new file mode 100644
index 0000000000..6fe7e96843
--- /dev/null
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
@@ -0,0 +1,99 @@
+@if (isVisible) {
+  <div class="field-container">
+
+    @if (field.type === 'text') {
+      <!-- Text Input -->
+      <div class="form-group">
+        <label [for]="field.key">{{ field.label }}</label>
+        <input
+          [id]="field.key"
+          [formControlName]="field.key"
+          [placeholder]="field.placeholder || ''"
+          class="form-control"
+          [class.is-invalid]="isFieldInvalid()">
+        @if (isFieldInvalid()) {
+          <div class="invalid-feedback">
+            {{ getErrorMessage() }}
+          </div>
+        }
+      </div>
+    } @else if (field.type === 'select') {
+      <!-- Select Dropdown -->
+      <div class="form-group">
+        <label [for]="field.key">{{ field.label }}</label>
+        <select
+          [id]="field.key"
+          [formControlName]="field.key"
+          class="form-control"
+          [class.is-invalid]="isFieldInvalid()">
+          <option value="">Please select...</option>
+          @for (option of field.options; track option.key) {
+            <option
+              [value]="option.key">
+              {{ option.value }}
+            </option>
+          }
+        </select>
+        @if (isFieldInvalid()) {
+          <div class="invalid-feedback">
+            {{ getErrorMessage() }}
+          </div>
+        }
+      </div>
+    } @else if (field.type === 'checkbox') {
+      <!-- Checkbox -->
+      <div class="form-group form-check">
+        <input
+          type="checkbox"
+          [id]="field.key"
+          [formControlName]="field.key"
+          class="form-check-input"
+          [class.is-invalid]="isFieldInvalid()">
+        <label class="form-check-label" [for]="field.key">
+          {{ field.label }}
+        </label>
+        @if (isFieldInvalid()) {
+          <div class="invalid-feedback">
+            {{ getErrorMessage() }}
+          </div>
+        }
+      </div>
+    } @else if (field.type === 'email') {
+      <!-- Email Input -->
+      <div class="form-group">
+        <label [for]="field.key">{{ field.label }}</label>
+        <input
+          type="email"
+          [id]="field.key"
+          [formControlName]="field.key"
+          [placeholder]="field.placeholder || ''"
+          class="form-control"
+          [class.is-invalid]="isFieldInvalid()">
+        @if (isFieldInvalid()) {
+          <div class="invalid-feedback">
+            {{ getErrorMessage() }}
+          </div>
+        }
+      </div>
+    } @else if (field.type === 'textarea') {
+      <!-- Textarea -->
+      <div class="form-group">
+        <label [for]="field.key">{{ field.label }}</label>
+        <textarea
+          [id]="field.key"
+          [formControlName]="field.key"
+          [placeholder]="field.placeholder || ''"
+          rows="4"
+          class="form-control"
+          [class.is-invalid]="isFieldInvalid()">
+        </textarea>
+        @if (isFieldInvalid()) {
+          <div class="invalid-feedback">
+            {{ getErrorMessage() }}
+          </div>
+        }
+      </div>
+    }
+  </div>
+  <!--      Add more field types as needed-->
+}
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
new file mode 100644
index 0000000000..50214c5df4
--- /dev/null
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
@@ -0,0 +1,56 @@
+import { ChangeDetectionStrategy, Component, InjectionToken } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+
+export const ABP_DYNAMIC_FORM_FIELD = new InjectionToken<DynamicFormFieldComponent>('AbpDynamicFormField');
+
+@Component({
+  selector: 'abp-dynamic-form-field',
+  templateUrl: './dynamic-form-field.component.html',
+  providers: [{ provide: ABP_DYNAMIC_FORM_FIELD, useExisting: DynamicFormFieldComponent }],
+  host: { 'class': 'abp-dynamic-form-field' },
+  exportAs: 'abpDynamicFormField',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    NgTemplateOutlet
+  ]
+})
+
+export class DynamicFormFieldComponent {
+  field = input<FormFieldConfig>();
+  @Input() isVisible: boolean = true;
+
+  ngOnInit() {
+    const control = this.form.get(this.field.key);
+    if (control) {
+      control.valueChanges.subscribe(value => {
+        this.fieldChange.emit({ fieldKey: this.field.key, value });
+      });
+    }
+  }
+
+  isFieldInvalid(): boolean {
+    const control = this.form.get(this.field.key);
+    return !!(control && control.invalid && (control.dirty || control.touched));
+  }
+
+  getErrorMessage(): string {
+    const control = this.form.get(this.field.key);
+    if (!control || !control.errors) return '';
+
+    const validators = this.field.validators || [];
+
+    for (const validator of validators) {
+      if (control.errors[validator.type]) {
+        return validator.message;
+      }
+    }
+
+    // Fallback error messages
+    if (control.errors['required']) return `${this.field.label} is required`;
+    if (control.errors['email']) return 'Please enter a valid email address';
+    if (control.errors['minlength']) return `Minimum length is ${control.errors['minlength'].requiredLength}`;
+    if (control.errors['maxlength']) return `Maximum length is ${control.errors['maxlength'].requiredLength}`;
+
+    return 'Invalid input';
+  }
+}
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/index.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/index.ts
new file mode 100644
index 0000000000..ce487ae2a5
--- /dev/null
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/index.ts
@@ -0,0 +1 @@
+export * from './dynamic-form-field.component';
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
index 725f559e05..8fde9f5792 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
@@ -1,4 +1,9 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, output, inject } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { DynamicFormService } from './dynamic-form.service';
+import { FormFieldConfig } from './dynamic-form.models';
+import { DynamicFormFieldComponent } from './dynamic-form-field';
 
 @Component({
   selector: 'abp-dynamic-form',
@@ -6,4 +11,124 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 
-export class DynamicFormComponent {}
+export class DynamicFormComponent {
+  fields = input<FormFieldConfig[]>([]);
+  submitButtonText = input<string>('Submit');
+  formSubmit = output<any>();
+  formCancel = output<void>();
+  private dynamicFormService = inject(DynamicFormService);
+
+  dynamicForm!: FormGroup;
+  isSubmitting = false;
+  fieldVisibility: { [key: string]: boolean } = {};
+
+  ngOnInit() {
+    this.dynamicForm = this.dynamicFormService.createFormGroup(this.fields());
+    this.initializeFieldVisibility();
+    this.setupConditionalLogic();
+  }
+
+  get sortedFields(): FormFieldConfig[] {
+    return this.fields().sort((a, b) => (a.order || 0) - (b.order || 0));
+  }
+
+  onSubmit() {
+    if (this.dynamicForm.valid) {
+      this.isSubmitting = true;
+      this.formSubmit.emit(this.dynamicForm.value);
+    } else {
+      this.markAllFieldsAsTouched();
+    }
+  }
+
+  onCancel() {
+    this.formCancel.emit();
+  }
+
+  onFieldChange(event: { fieldKey: string; value: any }) {
+    this.evaluateConditionalLogic(event.fieldKey);
+  }
+
+  isFieldVisible(field: FormFieldConfig): boolean {
+    return this.fieldVisibility[field.key] !== false;
+  }
+
+  private initializeFieldVisibility() {
+    this.fields().forEach(field => {
+      this.fieldVisibility[field.key] = !field.conditionalLogic?.length;
+    });
+  }
+
+  private setupConditionalLogic() {
+    this.fields().forEach(field => {
+      if (field.conditionalLogic) {
+        field.conditionalLogic.forEach(rule => {
+          const dependentControl = this.dynamicForm.get(rule.dependsOn);
+          if (dependentControl) {
+            dependentControl.valueChanges.subscribe(() => {
+              this.evaluateConditionalLogic(field.key);
+            });
+          }
+        });
+      }
+    });
+  }
+
+  private evaluateConditionalLogic(fieldKey: string) {
+    const field = this.fields().find(f => f.key === fieldKey);
+    if (!field?.conditionalLogic) return;
+
+    field.conditionalLogic.forEach(rule => {
+      const dependentValue = this.dynamicForm.get(rule.dependsOn)?.value;
+      const conditionMet = this.evaluateCondition(dependentValue, rule.condition, rule.value);
+
+      this.applyConditionalAction(fieldKey, rule.action, conditionMet);
+    });
+  }
+
+  private evaluateCondition(fieldValue: any, condition: string, ruleValue: any): boolean {
+    switch (condition) {
+      case 'equals':
+        return fieldValue === ruleValue;
+      case 'notEquals':
+        return fieldValue !== ruleValue;
+      case 'contains':
+        return fieldValue && fieldValue.includes && fieldValue.includes(ruleValue);
+      case 'greaterThan':
+        return Number(fieldValue) > Number(ruleValue);
+      case 'lessThan':
+        return Number(fieldValue) < Number(ruleValue);
+      default:
+        return false;
+    }
+  }
+
+  private applyConditionalAction(fieldKey: string, action: string, shouldApply: boolean) {
+    const control = this.dynamicForm.get(fieldKey);
+
+    switch (action) {
+      case 'show':
+        this.fieldVisibility[fieldKey] = shouldApply;
+        break;
+      case 'hide':
+        this.fieldVisibility[fieldKey] = !shouldApply;
+        break;
+      case 'enable':
+        if (control) {
+          shouldApply ? control.enable() : control.disable();
+        }
+        break;
+      case 'disable':
+        if (control) {
+          shouldApply ? control.disable() : control.enable();
+        }
+        break;
+    }
+  }
+
+  private markAllFieldsAsTouched() {
+    Object.keys(this.dynamicForm.controls).forEach(key => {
+      this.dynamicForm.get(key)?.markAsTouched();
+    });
+  }
+}
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.models.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.models.ts
index e69de29bb2..9ba75484c5 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.models.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.models.ts
@@ -0,0 +1,27 @@
+export interface FormFieldConfig {
+  key: string;
+  value?: any;
+  type: 'text' | 'email' | 'number' | 'select' | 'checkbox' | 'date' | 'textarea';
+  label: string;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  options?: { key: string; value: any }[];
+  validators?: ValidatorConfig[];
+  conditionalLogic?: ConditionalRule[];
+  order?: number;
+  gridSize?: number;
+}
+
+export interface ValidatorConfig {
+  type: 'required' | 'email' | 'minLength' | 'maxLength' | 'pattern' | 'custom';
+  value?: any;
+  message: string;
+}
+
+export interface ConditionalRule {
+  dependsOn: string;
+  condition: 'equals' | 'notEquals' | 'contains' | 'greaterThan' | 'lessThan';
+  value: any;
+  action: 'show' | 'hide' | 'enable' | 'disable';
+}
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.service.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.service.ts
index 0653dd5e5e..f8c960db5f 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.service.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.service.ts
@@ -1,8 +1,56 @@
-import { Injectable } from '@angular/core';
+import {Injectable} from '@angular/core';
+import {FormControl, FormGroup, ValidatorFn, Validators} from '@angular/forms';
+import {FormFieldConfig, ValidatorConfig} from './dynamic-form.models';
 
 @Injectable({
-  providedIn: 'root',
+  providedIn: 'root'
 })
-export class DynamicFormFieldService {
-  // Add any shared logic for dynamic form fields here if needed in the future
+
+export class DynamicFormService {
+
+  createFormGroup(fields: FormFieldConfig[]): FormGroup {
+    const group: any = {};
+
+    fields.forEach(field => {
+      const validators = this.buildValidators(field.validators || []);
+      const initialValue = this.getInitialValue(field);
+
+      group[field.key] = new FormControl({
+        value: initialValue,
+        disabled: field.disabled || false
+      }, validators);
+    });
+
+    return new FormGroup(group);
+  }
+
+  private buildValidators(validatorConfigs: ValidatorConfig[]): ValidatorFn[] {
+    return validatorConfigs.map(config => {
+      switch (config.type) {
+        case 'required':
+          return Validators.required;
+        case 'email':
+          return Validators.email;
+        case 'minLength':
+          return Validators.minLength(config.value);
+        case 'maxLength':
+          return Validators.maxLength(config.value);
+        case 'pattern':
+          return Validators.pattern(config.value);
+        default:
+          return Validators.nullValidator;
+      }
+    });
+  }
+
+  private getInitialValue(field: FormFieldConfig): any {
+    switch (field.type) {
+      case 'checkbox':
+        return false;
+      case 'number':
+        return 0;
+      default:
+        return '';
+    }
+  }
 }
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/public-api.ts b/npm/ng-packs/packages/components/dynamic-form/src/public-api.ts
index 38ece63528..5015931fc9 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/public-api.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/public-api.ts
@@ -1 +1,2 @@
 export * from './dynamic-form.component';
+export * from './dynamic-form-field';

From 5ca3db5c23e17a7719ebc595f89bd5f6993e6eca Mon Sep 17 00:00:00 2001
From: erdemcaygor <erdem.caygor@gmail.com>
Date: Wed, 8 Oct 2025 12:40:21 +0300
Subject: [PATCH 05/25] refactoring

---
 .../dynamic-form-field.component.html         | 180 ++++++++----------
 .../dynamic-form-field.component.ts           |  67 ++++---
 2 files changed, 117 insertions(+), 130 deletions(-)

diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
index 6fe7e96843..b8af60bcd8 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
@@ -1,99 +1,87 @@
-@if (isVisible) {
-  <div class="field-container">
+<div class="field-container">
 
-    @if (field.type === 'text') {
-      <!-- Text Input -->
-      <div class="form-group">
-        <label [for]="field.key">{{ field.label }}</label>
-        <input
-          [id]="field.key"
-          [formControlName]="field.key"
-          [placeholder]="field.placeholder || ''"
-          class="form-control"
-          [class.is-invalid]="isFieldInvalid()">
-        @if (isFieldInvalid()) {
-          <div class="invalid-feedback">
-            {{ getErrorMessage() }}
-          </div>
+  @if (field().type === 'text') {
+    <!-- Text Input -->
+    <div class="form-group">
+      <label [for]="field().key">{{ field().label }}</label>
+      <input
+        [id]="field().key"
+        [placeholder]="field().placeholder || ''"
+        class="form-control">
+<!--      @if (isFieldInvalid()) {
+        <div class="invalid-feedback">
+          {{ getErrorMessage() }}
+        </div>
+      }-->
+    </div>
+  } @else if (field().type === 'select') {
+    <!-- Select Dropdown -->
+    <div class="form-group">
+      <label [for]="field().key">{{ field().label }}</label>
+      <select
+        [id]="field().key"
+        class="form-control">
+        <option value="">Please select...</option>
+        @for (option of field().options; track option.key) {
+          <option
+            [value]="option.key">
+            {{ option.value }}
+          </option>
         }
-      </div>
-    } @else if (field.type === 'select') {
-      <!-- Select Dropdown -->
-      <div class="form-group">
-        <label [for]="field.key">{{ field.label }}</label>
-        <select
-          [id]="field.key"
-          [formControlName]="field.key"
-          class="form-control"
-          [class.is-invalid]="isFieldInvalid()">
-          <option value="">Please select...</option>
-          @for (option of field.options; track option.key) {
-            <option
-              [value]="option.key">
-              {{ option.value }}
-            </option>
-          }
-        </select>
-        @if (isFieldInvalid()) {
-          <div class="invalid-feedback">
-            {{ getErrorMessage() }}
-          </div>
-        }
-      </div>
-    } @else if (field.type === 'checkbox') {
-      <!-- Checkbox -->
-      <div class="form-group form-check">
-        <input
-          type="checkbox"
-          [id]="field.key"
-          [formControlName]="field.key"
-          class="form-check-input"
-          [class.is-invalid]="isFieldInvalid()">
-        <label class="form-check-label" [for]="field.key">
-          {{ field.label }}
-        </label>
-        @if (isFieldInvalid()) {
-          <div class="invalid-feedback">
-            {{ getErrorMessage() }}
-          </div>
-        }
-      </div>
-    } @else if (field.type === 'email') {
-      <!-- Email Input -->
-      <div class="form-group">
-        <label [for]="field.key">{{ field.label }}</label>
-        <input
-          type="email"
-          [id]="field.key"
-          [formControlName]="field.key"
-          [placeholder]="field.placeholder || ''"
-          class="form-control"
-          [class.is-invalid]="isFieldInvalid()">
-        @if (isFieldInvalid()) {
-          <div class="invalid-feedback">
-            {{ getErrorMessage() }}
-          </div>
-        }
-      </div>
-    } @else if (field.type === 'textarea') {
-      <!-- Textarea -->
-      <div class="form-group">
-        <label [for]="field.key">{{ field.label }}</label>
-        <textarea
-          [id]="field.key"
-          [formControlName]="field.key"
-          [placeholder]="field.placeholder || ''"
-          rows="4"
-          class="form-control"
-          [class.is-invalid]="isFieldInvalid()">
+      </select>
+<!--      @if (isFieldInvalid()) {
+        <div class="invalid-feedback">
+          {{ getErrorMessage() }}
+        </div>
+      }-->
+    </div>
+  } @else if (field().type === 'checkbox') {
+    <!-- Checkbox -->
+    <div class="form-group form-check">
+      <input
+        type="checkbox"
+        [id]="field().key"
+        class="form-check-input">
+      <label class="form-check-label" [for]="field().key">
+        {{ field().label }}
+      </label>
+<!--      @if (isFieldInvalid()) {
+        <div class="invalid-feedback">
+          {{ getErrorMessage() }}
+        </div>
+      }-->
+    </div>
+  } @else if (field().type === 'email') {
+    <!-- Email Input -->
+    <div class="form-group">
+      <label [for]="field().key">{{ field().label }}</label>
+      <input
+        type="email"
+        [id]="field().key"
+        [placeholder]="field().placeholder || ''"
+        class="form-control">
+<!--      @if (isFieldInvalid()) {
+        <div class="invalid-feedback">
+          {{ getErrorMessage() }}
+        </div>
+      }-->
+    </div>
+  } @else if (field().type === 'textarea') {
+    <!-- Textarea -->
+    <div class="form-group">
+      <label [for]="field().key">{{ field().label }}</label>
+      <textarea
+        [id]="field().key"
+        [placeholder]="field().placeholder || ''"
+        rows="4"
+        class="form-control">
         </textarea>
-        @if (isFieldInvalid()) {
-          <div class="invalid-feedback">
-            {{ getErrorMessage() }}
-          </div>
-        }
-      </div>
-    }
-  </div>
-  <!--      Add more field types as needed-->
-}
+<!--      @if (isFieldInvalid()) {
+        <div class="invalid-feedback">
+          {{ getErrorMessage() }}
+        </div>
+      }-->
+    </div>
+  }
+</div>
+<!--      Add more field types as needed-->
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
index 50214c5df4..e1417c95cd 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
@@ -1,12 +1,26 @@
-import { ChangeDetectionStrategy, Component, InjectionToken } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  forwardRef,
+  InjectionToken,
+  input,
+} from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
+import { FormFieldConfig } from '../dynamic-form.models';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 export const ABP_DYNAMIC_FORM_FIELD = new InjectionToken<DynamicFormFieldComponent>('AbpDynamicFormField');
 
+const DYNAMIC_FORM_FIELD_CONTROL_VALUE_ACCESSOR = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => DynamicFormFieldComponent),
+  multi: true,
+};
+
 @Component({
   selector: 'abp-dynamic-form-field',
   templateUrl: './dynamic-form-field.component.html',
-  providers: [{ provide: ABP_DYNAMIC_FORM_FIELD, useExisting: DynamicFormFieldComponent }],
+  providers: [{ provide: ABP_DYNAMIC_FORM_FIELD, useExisting: DynamicFormFieldComponent }, DYNAMIC_FORM_FIELD_CONTROL_VALUE_ACCESSOR],
   host: { 'class': 'abp-dynamic-form-field' },
   exportAs: 'abpDynamicFormField',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -15,42 +29,27 @@ export const ABP_DYNAMIC_FORM_FIELD = new InjectionToken<DynamicFormFieldCompone
   ]
 })
 
-export class DynamicFormFieldComponent {
-  field = input<FormFieldConfig>();
-  @Input() isVisible: boolean = true;
-
-  ngOnInit() {
-    const control = this.form.get(this.field.key);
-    if (control) {
-      control.valueChanges.subscribe(value => {
-        this.fieldChange.emit({ fieldKey: this.field.key, value });
-      });
-    }
-  }
+export class DynamicFormFieldComponent implements ControlValueAccessor {
+  field = input.required<FormFieldConfig>();
+  isVisible = input<boolean>(true);
+  disabled = false;
 
-  isFieldInvalid(): boolean {
-    const control = this.form.get(this.field.key);
-    return !!(control && control.invalid && (control.dirty || control.touched));
+  writeValue(value: any[]): void {
+    //
   }
 
-  getErrorMessage(): string {
-    const control = this.form.get(this.field.key);
-    if (!control || !control.errors) return '';
-
-    const validators = this.field.validators || [];
-
-    for (const validator of validators) {
-      if (control.errors[validator.type]) {
-        return validator.message;
-      }
-    }
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
 
-    // Fallback error messages
-    if (control.errors['required']) return `${this.field.label} is required`;
-    if (control.errors['email']) return 'Please enter a valid email address';
-    if (control.errors['minlength']) return `Minimum length is ${control.errors['minlength'].requiredLength}`;
-    if (control.errors['maxlength']) return `Maximum length is ${control.errors['maxlength'].requiredLength}`;
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
 
-    return 'Invalid input';
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
   }
+
+  private onChange: (value: any) => void = () => {};
+  private onTouched: () => void = () => {};
 }

From d19134b99903a413cc09421a3b2dd31af74b4e78 Mon Sep 17 00:00:00 2001
From: erdemcaygor <erdem.caygor@gmail.com>
Date: Wed, 8 Oct 2025 13:29:44 +0300
Subject: [PATCH 06/25] refactoring

---
 .../src/dynamic-form-field/dynamic-form-field.component.html | 5 +++++
 .../src/dynamic-form-field/dynamic-form-field.component.ts   | 4 +++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
index b8af60bcd8..c67d82a105 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
@@ -7,6 +7,7 @@
       <input
         [id]="field().key"
         [placeholder]="field().placeholder || ''"
+        [(value)]="value"
         class="form-control">
 <!--      @if (isFieldInvalid()) {
         <div class="invalid-feedback">
@@ -20,6 +21,7 @@
       <label [for]="field().key">{{ field().label }}</label>
       <select
         [id]="field().key"
+        [(value)]="value"
         class="form-control">
         <option value="">Please select...</option>
         @for (option of field().options; track option.key) {
@@ -41,6 +43,7 @@
       <input
         type="checkbox"
         [id]="field().key"
+        [(value)]="value"
         class="form-check-input">
       <label class="form-check-label" [for]="field().key">
         {{ field().label }}
@@ -58,6 +61,7 @@
       <input
         type="email"
         [id]="field().key"
+        [(value)]="value"
         [placeholder]="field().placeholder || ''"
         class="form-control">
 <!--      @if (isFieldInvalid()) {
@@ -72,6 +76,7 @@
       <label [for]="field().key">{{ field().label }}</label>
       <textarea
         [id]="field().key"
+        [(value)]="value"
         [placeholder]="field().placeholder || ''"
         rows="4"
         class="form-control">
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
index e1417c95cd..18c312f20c 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
@@ -7,7 +7,7 @@ import {
 } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { FormFieldConfig } from '../dynamic-form.models';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 export const ABP_DYNAMIC_FORM_FIELD = new InjectionToken<DynamicFormFieldComponent>('AbpDynamicFormField');
 
@@ -25,6 +25,7 @@ const DYNAMIC_FORM_FIELD_CONTROL_VALUE_ACCESSOR = {
   exportAs: 'abpDynamicFormField',
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
+    FormsModule,
     NgTemplateOutlet
   ]
 })
@@ -33,6 +34,7 @@ export class DynamicFormFieldComponent implements ControlValueAccessor {
   field = input.required<FormFieldConfig>();
   isVisible = input<boolean>(true);
   disabled = false;
+  value: any;
 
   writeValue(value: any[]): void {
     //

From fb0dd4416d87d38391f89926c83c7d9636e1e34a Mon Sep 17 00:00:00 2001
From: erdemcaygor <erdem.caygor@gmail.com>
Date: Wed, 8 Oct 2025 14:10:00 +0300
Subject: [PATCH 07/25] refactoring

---
 .../dynamic-form-field.component.html         | 182 +++++++++---------
 .../dynamic-form-field.component.ts           |   9 +-
 .../src/dynamic-form.component.html           |  27 +++
 .../src/dynamic-form.component.ts             |  11 +-
 4 files changed, 132 insertions(+), 97 deletions(-)
 create mode 100644 npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html

diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
index c67d82a105..a122ad9315 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
@@ -1,92 +1,94 @@
-<div class="field-container">
+@if (visible()) {
+  <div class="field-container">
 
-  @if (field().type === 'text') {
-    <!-- Text Input -->
-    <div class="form-group">
-      <label [for]="field().key">{{ field().label }}</label>
-      <input
-        [id]="field().key"
-        [placeholder]="field().placeholder || ''"
-        [(value)]="value"
-        class="form-control">
-<!--      @if (isFieldInvalid()) {
-        <div class="invalid-feedback">
-          {{ getErrorMessage() }}
-        </div>
-      }-->
-    </div>
-  } @else if (field().type === 'select') {
-    <!-- Select Dropdown -->
-    <div class="form-group">
-      <label [for]="field().key">{{ field().label }}</label>
-      <select
-        [id]="field().key"
-        [(value)]="value"
-        class="form-control">
-        <option value="">Please select...</option>
-        @for (option of field().options; track option.key) {
-          <option
-            [value]="option.key">
-            {{ option.value }}
-          </option>
-        }
-      </select>
-<!--      @if (isFieldInvalid()) {
-        <div class="invalid-feedback">
-          {{ getErrorMessage() }}
-        </div>
-      }-->
-    </div>
-  } @else if (field().type === 'checkbox') {
-    <!-- Checkbox -->
-    <div class="form-group form-check">
-      <input
-        type="checkbox"
-        [id]="field().key"
-        [(value)]="value"
-        class="form-check-input">
-      <label class="form-check-label" [for]="field().key">
-        {{ field().label }}
-      </label>
-<!--      @if (isFieldInvalid()) {
-        <div class="invalid-feedback">
-          {{ getErrorMessage() }}
-        </div>
-      }-->
-    </div>
-  } @else if (field().type === 'email') {
-    <!-- Email Input -->
-    <div class="form-group">
-      <label [for]="field().key">{{ field().label }}</label>
-      <input
-        type="email"
-        [id]="field().key"
-        [(value)]="value"
-        [placeholder]="field().placeholder || ''"
-        class="form-control">
-<!--      @if (isFieldInvalid()) {
-        <div class="invalid-feedback">
-          {{ getErrorMessage() }}
-        </div>
-      }-->
-    </div>
-  } @else if (field().type === 'textarea') {
-    <!-- Textarea -->
-    <div class="form-group">
-      <label [for]="field().key">{{ field().label }}</label>
-      <textarea
-        [id]="field().key"
-        [(value)]="value"
-        [placeholder]="field().placeholder || ''"
-        rows="4"
-        class="form-control">
+    @if (field().type === 'text') {
+      <!-- Text Input -->
+      <div class="form-group">
+        <label [for]="field().key">{{ field().label }}</label>
+        <input
+          [id]="field().key"
+          [placeholder]="field().placeholder || ''"
+          [(value)]="value"
+          class="form-control">
+        <!--      @if (isFieldInvalid()) {
+                <div class="invalid-feedback">
+                  {{ getErrorMessage() }}
+                </div>
+              }-->
+      </div>
+    } @else if (field().type === 'select') {
+      <!-- Select Dropdown -->
+      <div class="form-group">
+        <label [for]="field().key">{{ field().label }}</label>
+        <select
+          [id]="field().key"
+          [(value)]="value"
+          class="form-control">
+          <option value="">Please select...</option>
+          @for (option of field().options; track option.key) {
+            <option
+              [value]="option.key">
+              {{ option.value }}
+            </option>
+          }
+        </select>
+        <!--      @if (isFieldInvalid()) {
+                <div class="invalid-feedback">
+                  {{ getErrorMessage() }}
+                </div>
+              }-->
+      </div>
+    } @else if (field().type === 'checkbox') {
+      <!-- Checkbox -->
+      <div class="form-group form-check">
+        <input
+          type="checkbox"
+          [id]="field().key"
+          [(value)]="value"
+          class="form-check-input">
+        <label class="form-check-label" [for]="field().key">
+          {{ field().label }}
+        </label>
+        <!--      @if (isFieldInvalid()) {
+                <div class="invalid-feedback">
+                  {{ getErrorMessage() }}
+                </div>
+              }-->
+      </div>
+    } @else if (field().type === 'email') {
+      <!-- Email Input -->
+      <div class="form-group">
+        <label [for]="field().key">{{ field().label }}</label>
+        <input
+          type="email"
+          [id]="field().key"
+          [(value)]="value"
+          [placeholder]="field().placeholder || ''"
+          class="form-control">
+        <!--      @if (isFieldInvalid()) {
+                <div class="invalid-feedback">
+                  {{ getErrorMessage() }}
+                </div>
+              }-->
+      </div>
+    } @else if (field().type === 'textarea') {
+      <!-- Textarea -->
+      <div class="form-group">
+        <label [for]="field().key">{{ field().label }}</label>
+        <textarea
+          [id]="field().key"
+          [(value)]="value"
+          [placeholder]="field().placeholder || ''"
+          rows="4"
+          class="form-control">
         </textarea>
-<!--      @if (isFieldInvalid()) {
-        <div class="invalid-feedback">
-          {{ getErrorMessage() }}
-        </div>
-      }-->
-    </div>
-  }
-</div>
-<!--      Add more field types as needed-->
+        <!--      @if (isFieldInvalid()) {
+                <div class="invalid-feedback">
+                  {{ getErrorMessage() }}
+                </div>
+              }-->
+      </div>
+    }
+  </div>
+  <!--      Add more field types as needed-->
+}
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
index 18c312f20c..1aa89c31f0 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
@@ -1,7 +1,9 @@
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   forwardRef,
+  inject,
   InjectionToken,
   input,
 } from '@angular/core';
@@ -32,12 +34,14 @@ const DYNAMIC_FORM_FIELD_CONTROL_VALUE_ACCESSOR = {
 
 export class DynamicFormFieldComponent implements ControlValueAccessor {
   field = input.required<FormFieldConfig>();
-  isVisible = input<boolean>(true);
+  visible = input<boolean>(true);
   disabled = false;
   value: any;
+  readonly changeDetectorRef = inject(ChangeDetectorRef);
 
   writeValue(value: any[]): void {
-    //
+    this.value = value;
+    this.changeDetectorRef.markForCheck();
   }
 
   registerOnChange(fn: any): void {
@@ -50,6 +54,7 @@ export class DynamicFormFieldComponent implements ControlValueAccessor {
 
   setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;
+    this.changeDetectorRef.markForCheck();
   }
 
   private onChange: (value: any) => void = () => {};
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html
new file mode 100644
index 0000000000..b1a5c15ebd
--- /dev/null
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html
@@ -0,0 +1,27 @@
+<form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()" class="dynamic-form">
+  @for (field of sortedFields; track field.key) {
+    <div class="row">
+      <div [ngClass]="'col-md-' + (field.gridSize || 12)">
+        <abp-dynamic-form-field
+          [field]="field"
+          [formControlName]="field.key"
+          [visible]="isFieldVisible(field)">
+        </abp-dynamic-form-field>
+      </div>
+    </div>
+  }
+  <div class="form-actions">
+    <button
+      type="button"
+      class="btn btn-secondary"
+      (click)="onCancel()">
+      Cancel
+    </button>
+    <button
+      type="submit"
+      class="btn btn-primary"
+      [disabled]="!dynamicForm.valid || isSubmitting">
+      {{ submitButtonText() }}
+    </button>
+  </div>
+</form>
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
index 8fde9f5792..8aa11ade97 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
@@ -1,5 +1,5 @@
-import { ChangeDetectionStrategy, Component, input, output, inject } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { ChangeDetectionStrategy, Component, input, output, inject, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { DynamicFormService } from './dynamic-form.service';
 import { FormFieldConfig } from './dynamic-form.models';
@@ -7,11 +7,12 @@ import { DynamicFormFieldComponent } from './dynamic-form-field';
 
 @Component({
   selector: 'abp-dynamic-form',
-  template: ``,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  templateUrl: './dynamic-form.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, DynamicFormFieldComponent, ReactiveFormsModule],
 })
 
-export class DynamicFormComponent {
+export class DynamicFormComponent implements OnInit {
   fields = input<FormFieldConfig[]>([]);
   submitButtonText = input<string>('Submit');
   formSubmit = output<any>();

From bc3f38fe9670bb81642ac65afa5fa733224bacc3 Mon Sep 17 00:00:00 2001
From: erdemcaygor <erdem.caygor@gmail.com>
Date: Wed, 8 Oct 2025 15:32:15 +0300
Subject: [PATCH 08/25] form field updated

---
 .../dev-app/src/app/home/home.component.html     |  3 +++
 .../dynamic-form-field.component.html            | 15 ++++++++++-----
 .../dynamic-form-field.component.ts              |  5 +++++
 .../dynamic-form/src/dynamic-form.component.html | 16 +++++++++-------
 .../dynamic-form/src/dynamic-form.component.ts   |  5 +++--
 .../dynamic-form/src/dynamic-form.service.ts     |  3 +++
 .../components/dynamic-form/src/public-api.ts    |  1 +
 7 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/npm/ng-packs/apps/dev-app/src/app/home/home.component.html b/npm/ng-packs/apps/dev-app/src/app/home/home.component.html
index 1a0d46c2da..9f6de55327 100644
--- a/npm/ng-packs/apps/dev-app/src/app/home/home.component.html
+++ b/npm/ng-packs/apps/dev-app/src/app/home/home.component.html
@@ -6,6 +6,9 @@ <h5 class="m-1">
         <strong>MyProjectName</strong> is successfully running!
       </h5>
     </div>
+
+    <abp-dynamic-form [fields]="formFields"></abp-dynamic-form>
+
     <h1>{{ '::Welcome' | abpLocalization }}</h1>
 
     <p class="lead px-lg-5 mx-lg-5">{{ '::LongWelcomeMessage' | abpLocalization }}</p>
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
index a122ad9315..a8d8423c50 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
@@ -8,7 +8,8 @@
         <input
           [id]="field().key"
           [placeholder]="field().placeholder || ''"
-          [(value)]="value"
+          [ngModel]="value"
+          (ngModelChange)="onValueChange($event)"
           class="form-control">
         <!--      @if (isFieldInvalid()) {
                 <div class="invalid-feedback">
@@ -22,7 +23,8 @@
         <label [for]="field().key">{{ field().label }}</label>
         <select
           [id]="field().key"
-          [(value)]="value"
+          [ngModel]="value"
+          (ngModelChange)="onValueChange($event)"
           class="form-control">
           <option value="">Please select...</option>
           @for (option of field().options; track option.key) {
@@ -44,7 +46,8 @@
         <input
           type="checkbox"
           [id]="field().key"
-          [(value)]="value"
+          [ngModel]="value"
+          (ngModelChange)="onValueChange($event)"
           class="form-check-input">
         <label class="form-check-label" [for]="field().key">
           {{ field().label }}
@@ -62,7 +65,8 @@
         <input
           type="email"
           [id]="field().key"
-          [(value)]="value"
+          [ngModel]="value"
+          (ngModelChange)="onValueChange($event)"
           [placeholder]="field().placeholder || ''"
           class="form-control">
         <!--      @if (isFieldInvalid()) {
@@ -77,7 +81,8 @@
         <label [for]="field().key">{{ field().label }}</label>
         <textarea
           [id]="field().key"
-          [(value)]="value"
+          [ngModel]="value"
+          (ngModelChange)="onValueChange($event)"
           [placeholder]="field().placeholder || ''"
           rows="4"
           class="form-control">
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
index 1aa89c31f0..8d2cf04425 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
@@ -39,6 +39,11 @@ export class DynamicFormFieldComponent implements ControlValueAccessor {
   value: any;
   readonly changeDetectorRef = inject(ChangeDetectorRef);
 
+  onValueChange(value: any) {
+    console.log(value);
+    this.onChange(value);
+  }
+
   writeValue(value: any[]): void {
     this.value = value;
     this.changeDetectorRef.markForCheck();
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html
index b1a5c15ebd..c216a9ef7f 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html
@@ -11,16 +11,18 @@
     </div>
   }
   <div class="form-actions">
-    <button
-      type="button"
-      class="btn btn-secondary"
-      (click)="onCancel()">
-      Cancel
-    </button>
+    @if (showCancelButton()) {
+      <button
+        type="button"
+        class="btn btn-secondary"
+        (click)="onCancel()">
+        Cancel
+      </button>
+    }
     <button
       type="submit"
       class="btn btn-primary"
-      [disabled]="!dynamicForm.valid || isSubmitting">
+      [disabled]="!dynamicForm.valid || submitInProgress()">
       {{ submitButtonText() }}
     </button>
   </div>
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
index 8aa11ade97..a9cc2a5cc4 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
@@ -15,12 +15,13 @@ import { DynamicFormFieldComponent } from './dynamic-form-field';
 export class DynamicFormComponent implements OnInit {
   fields = input<FormFieldConfig[]>([]);
   submitButtonText = input<string>('Submit');
+  submitInProgress = input<boolean>(false);
+  showCancelButton = input<boolean>(false);
   formSubmit = output<any>();
   formCancel = output<void>();
   private dynamicFormService = inject(DynamicFormService);
 
   dynamicForm!: FormGroup;
-  isSubmitting = false;
   fieldVisibility: { [key: string]: boolean } = {};
 
   ngOnInit() {
@@ -34,8 +35,8 @@ export class DynamicFormComponent implements OnInit {
   }
 
   onSubmit() {
+    console.log(this.dynamicForm.getRawValue());
     if (this.dynamicForm.valid) {
-      this.isSubmitting = true;
       this.formSubmit.emit(this.dynamicForm.value);
     } else {
       this.markAllFieldsAsTouched();
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.service.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.service.ts
index f8c960db5f..4399e8822d 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.service.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.service.ts
@@ -44,6 +44,9 @@ export class DynamicFormService {
   }
 
   private getInitialValue(field: FormFieldConfig): any {
+    if (field.value) {
+      return field.value;
+    }
     switch (field.type) {
       case 'checkbox':
         return false;
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/public-api.ts b/npm/ng-packs/packages/components/dynamic-form/src/public-api.ts
index 5015931fc9..aae289278c 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/public-api.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/public-api.ts
@@ -1,2 +1,3 @@
 export * from './dynamic-form.component';
 export * from './dynamic-form-field';
+export * from './dynamic-form.models';

From 391c51eb738e0aa8794a6bf128b601b9a2af43e2 Mon Sep 17 00:00:00 2001
From: erdemcaygor <erdem.caygor@gmail.com>
Date: Wed, 8 Oct 2025 16:57:57 +0300
Subject: [PATCH 09/25] dynamic form field validation logic updated

---
 .../dynamic-form-field.component.html         |  5 ++
 .../dynamic-form-field.component.ts           | 54 +++++++++++++++----
 .../src/dynamic-form.component.ts             | 17 ++++--
 3 files changed, 61 insertions(+), 15 deletions(-)

diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
index a8d8423c50..68bc9cb23d 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
@@ -10,6 +10,7 @@
           [placeholder]="field().placeholder || ''"
           [ngModel]="value"
           (ngModelChange)="onValueChange($event)"
+          [class.is-invalid]="isValid"
           class="form-control">
         <!--      @if (isFieldInvalid()) {
                 <div class="invalid-feedback">
@@ -25,6 +26,7 @@
           [id]="field().key"
           [ngModel]="value"
           (ngModelChange)="onValueChange($event)"
+          [class.is-invalid]="isValid"
           class="form-control">
           <option value="">Please select...</option>
           @for (option of field().options; track option.key) {
@@ -48,6 +50,7 @@
           [id]="field().key"
           [ngModel]="value"
           (ngModelChange)="onValueChange($event)"
+          [class.is-invalid]="isValid"
           class="form-check-input">
         <label class="form-check-label" [for]="field().key">
           {{ field().label }}
@@ -68,6 +71,7 @@
           [ngModel]="value"
           (ngModelChange)="onValueChange($event)"
           [placeholder]="field().placeholder || ''"
+          [class.is-invalid]="isValid"
           class="form-control">
         <!--      @if (isFieldInvalid()) {
                 <div class="invalid-feedback">
@@ -84,6 +88,7 @@
           [ngModel]="value"
           (ngModelChange)="onValueChange($event)"
           [placeholder]="field().placeholder || ''"
+          [class.is-invalid]="isValid"
           rows="4"
           class="form-control">
         </textarea>
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
index 8d2cf04425..fd92a8040c 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
@@ -2,14 +2,29 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   forwardRef,
   inject,
-  InjectionToken,
+  InjectionToken, Injector,
   input,
+  OnInit,
 } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { FormFieldConfig } from '../dynamic-form.models';
-import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import {
+  AbstractControl,
+  ControlValueAccessor,
+  FormControl,
+  FormControlName,
+  FormGroupDirective,
+  FormsModule,
+  NG_VALIDATORS,
+  NG_VALUE_ACCESSOR,
+  NgControl,
+  ValidationErrors,
+  Validators,
+} from '@angular/forms';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 export const ABP_DYNAMIC_FORM_FIELD = new InjectionToken<DynamicFormFieldComponent>('AbpDynamicFormField');
 
@@ -22,26 +37,36 @@ const DYNAMIC_FORM_FIELD_CONTROL_VALUE_ACCESSOR = {
 @Component({
   selector: 'abp-dynamic-form-field',
   templateUrl: './dynamic-form-field.component.html',
-  providers: [{ provide: ABP_DYNAMIC_FORM_FIELD, useExisting: DynamicFormFieldComponent }, DYNAMIC_FORM_FIELD_CONTROL_VALUE_ACCESSOR],
-  host: { 'class': 'abp-dynamic-form-field' },
+  providers: [
+    { provide: ABP_DYNAMIC_FORM_FIELD, useExisting: DynamicFormFieldComponent },
+    DYNAMIC_FORM_FIELD_CONTROL_VALUE_ACCESSOR
+  ],
+  host: { class: 'abp-dynamic-form-field' },
   exportAs: 'abpDynamicFormField',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    FormsModule,
-    NgTemplateOutlet
-  ]
+  imports: [FormsModule],
 })
-
-export class DynamicFormFieldComponent implements ControlValueAccessor {
+export class DynamicFormFieldComponent implements OnInit, ControlValueAccessor {
   field = input.required<FormFieldConfig>();
   visible = input<boolean>(true);
   disabled = false;
   value: any;
+  isFieldInvalid: boolean = false;
+  control!: FormControl;
   readonly changeDetectorRef = inject(ChangeDetectorRef);
+  readonly destroyRef = inject(DestroyRef);
+  private injector = inject(Injector);
+
+  ngOnInit() {
+    const ngControl = this.injector.get(NgControl, null);
+    if (ngControl) {
+      this.control = this.injector.get(FormGroupDirective).getControl(ngControl as FormControlName);
+    }
+  }
 
   onValueChange(value: any) {
-    console.log(value);
     this.onChange(value);
+    this.changeDetectorRef.markForCheck();
   }
 
   writeValue(value: any[]): void {
@@ -62,6 +87,13 @@ export class DynamicFormFieldComponent implements ControlValueAccessor {
     this.changeDetectorRef.markForCheck();
   }
 
+  get isValid(): boolean {
+    if (this.control) {
+      return this.control.invalid && (this.control.dirty || this.control.touched);
+    }
+    return true;
+  }
+
   private onChange: (value: any) => void = () => {};
   private onTouched: () => void = () => {};
 }
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
index a9cc2a5cc4..b89dc1be20 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
@@ -1,9 +1,18 @@
-import { ChangeDetectionStrategy, Component, input, output, inject, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+  inject,
+  OnInit,
+  DestroyRef,
+} from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { DynamicFormService } from './dynamic-form.service';
 import { FormFieldConfig } from './dynamic-form.models';
 import { DynamicFormFieldComponent } from './dynamic-form-field';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'abp-dynamic-form',
@@ -17,9 +26,10 @@ export class DynamicFormComponent implements OnInit {
   submitButtonText = input<string>('Submit');
   submitInProgress = input<boolean>(false);
   showCancelButton = input<boolean>(false);
-  formSubmit = output<any>();
+  formSubmit = output<void>();
   formCancel = output<void>();
   private dynamicFormService = inject(DynamicFormService);
+  readonly destroyRef = inject(DestroyRef);
 
   dynamicForm!: FormGroup;
   fieldVisibility: { [key: string]: boolean } = {};
@@ -35,7 +45,6 @@ export class DynamicFormComponent implements OnInit {
   }
 
   onSubmit() {
-    console.log(this.dynamicForm.getRawValue());
     if (this.dynamicForm.valid) {
       this.formSubmit.emit(this.dynamicForm.value);
     } else {
@@ -67,7 +76,7 @@ export class DynamicFormComponent implements OnInit {
         field.conditionalLogic.forEach(rule => {
           const dependentControl = this.dynamicForm.get(rule.dependsOn);
           if (dependentControl) {
-            dependentControl.valueChanges.subscribe(() => {
+            dependentControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
               this.evaluateConditionalLogic(field.key);
             });
           }

From ffa3b85cc4ebd32cde6fced2cd6a047e158a2a6a Mon Sep 17 00:00:00 2001
From: erdemcaygor <erdem.caygor@gmail.com>
Date: Wed, 8 Oct 2025 17:07:23 +0300
Subject: [PATCH 10/25] removed unnecessary form field control interface

---
 .../dynamic-form-field-control.ts             | 75 -------------------
 1 file changed, 75 deletions(-)
 delete mode 100644 npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field-control.ts

diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field-control.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field-control.ts
deleted file mode 100644
index 3a87454884..0000000000
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field-control.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-
-import {Observable} from 'rxjs';
-import {AbstractControlDirective, NgControl} from '@angular/forms';
-import {Directive} from '@angular/core';
-
-@Directive()
-export abstract class MatFormFieldControl<T> {
-  /** The value of the control. */
-  value: T | null;
-
-  /**
-   * Stream that emits whenever the state of the control changes such that the parent `MatFormField`
-   * needs to run change detection.
-   */
-  readonly stateChanges: Observable<void>;
-
-  /** The element ID for this control. */
-  readonly id: string;
-
-  /** The placeholder for this control. */
-  readonly placeholder: string;
-
-  /** Gets the AbstractControlDirective for this control. */
-  readonly ngControl: NgControl | AbstractControlDirective | null;
-
-  /** Whether the control is focused. */
-  readonly focused: boolean;
-
-  /** Whether the control is empty. */
-  readonly empty: boolean;
-
-  /** Whether the control is required. */
-  readonly required: boolean;
-
-  /** Whether the control is disabled. */
-  readonly disabled: boolean;
-
-  /** Whether the control is in an error state. */
-  readonly errorState: boolean;
-
-  /**
-   * An optional name for the control type that can be used to distinguish `mat-form-field` elements
-   * based on their control type. The form field will add a class,
-   * `mat-form-field-type-{{controlType}}` to its root element.
-   */
-  readonly controlType?: string;
-
-  /**
-   * Whether the input is currently in an autofilled state. If property is not present on the
-   * control it is assumed to be false.
-   */
-  readonly autofilled?: boolean;
-
-  /**
-   * Value of `aria-describedby` that should be merged with the described-by ids
-   * which are set by the form-field.
-   */
-  readonly userAriaDescribedBy?: string;
-
-  /**
-   * Whether to automatically assign the ID of the form field as the `for` attribute
-   * on the `<label>` inside the form field. Set this to true to prevent the form
-   * field from associating the label with non-native elements.
-   */
-  readonly disableAutomaticLabeling?: boolean;
-
-  /** Gets the list of element IDs that currently describe this control. */
-  readonly describedByIds?: string[];
-
-  /** Sets the list of element IDs that currently describe this control. */
-  abstract setDescribedByIds(ids: string[]): void;
-
-  /** Handles a click on the control's container. */
-  abstract onContainerClick(event: MouseEvent): void;
-}

From 6715aae1404fc578e72c1856096eb3e4473e464b Mon Sep 17 00:00:00 2001
From: erdemcaygor <erdem.caygor@gmail.com>
Date: Wed, 8 Oct 2025 23:54:51 +0300
Subject: [PATCH 11/25] refactoring

---
 .../dynamic-form-field.component.html         |  4 ---
 .../dynamic-form-field.component.scss         |  4 +++
 .../dynamic-form-field.component.ts           |  1 +
 .../src/dynamic-form.component.html           |  9 +++++-
 .../src/dynamic-form.component.scss           | 12 ++++++++
 .../src/dynamic-form.component.ts             | 28 ++++++++++++++-----
 6 files changed, 46 insertions(+), 12 deletions(-)
 create mode 100644 npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.scss
 create mode 100644 npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.scss

diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
index 68bc9cb23d..f82083e95a 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
@@ -1,6 +1,4 @@
 @if (visible()) {
-  <div class="field-container">
-
     @if (field().type === 'text') {
       <!-- Text Input -->
       <div class="form-group">
@@ -99,6 +97,4 @@
               }-->
       </div>
     }
-  </div>
-  <!--      Add more field types as needed-->
 }
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.scss b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.scss
new file mode 100644
index 0000000000..a1b8a5c16f
--- /dev/null
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.scss
@@ -0,0 +1,4 @@
+.form-group {
+  display: flex;
+  flex-direction: column;
+}
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
index fd92a8040c..32f0de1543 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
@@ -37,6 +37,7 @@ const DYNAMIC_FORM_FIELD_CONTROL_VALUE_ACCESSOR = {
 @Component({
   selector: 'abp-dynamic-form-field',
   templateUrl: './dynamic-form-field.component.html',
+  styleUrls: ['./dynamic-form-field.component.scss'],
   providers: [
     { provide: ABP_DYNAMIC_FORM_FIELD, useExisting: DynamicFormFieldComponent },
     DYNAMIC_FORM_FIELD_CONTROL_VALUE_ACCESSOR
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html
index c216a9ef7f..e7b10338a6 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html
@@ -10,6 +10,13 @@
       </div>
     </div>
   }
+  <ng-content select="[actions]">
+    <ng-container [ngTemplateOutlet]="defaultActions"></ng-container>
+  </ng-content>
+
+</form>
+
+<ng-template #defaultActions>
   <div class="form-actions">
     @if (showCancelButton()) {
       <button
@@ -26,4 +33,4 @@
       {{ submitButtonText() }}
     </button>
   </div>
-</form>
+</ng-template>
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.scss b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.scss
new file mode 100644
index 0000000000..f82cbec465
--- /dev/null
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.scss
@@ -0,0 +1,12 @@
+:host(.abp-dynamic-form) {
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+}
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
index b89dc1be20..573335b638 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
@@ -6,17 +6,21 @@ import {
   inject,
   OnInit,
   DestroyRef,
+  effect,
+  ChangeDetectorRef,
 } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DynamicFormService } from './dynamic-form.service';
 import { FormFieldConfig } from './dynamic-form.models';
 import { DynamicFormFieldComponent } from './dynamic-form-field';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'abp-dynamic-form',
   templateUrl: './dynamic-form.component.html',
+  styleUrls: ['./dynamic-form.component.scss'],
+  host: { class: 'abp-dynamic-form' },
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [CommonModule, DynamicFormFieldComponent, ReactiveFormsModule],
 })
@@ -30,14 +34,13 @@ export class DynamicFormComponent implements OnInit {
   formCancel = output<void>();
   private dynamicFormService = inject(DynamicFormService);
   readonly destroyRef = inject(DestroyRef);
+  readonly changeDetectorRef = inject(ChangeDetectorRef);
 
   dynamicForm!: FormGroup;
   fieldVisibility: { [key: string]: boolean } = {};
 
   ngOnInit() {
-    this.dynamicForm = this.dynamicFormService.createFormGroup(this.fields());
-    this.initializeFieldVisibility();
-    this.setupConditionalLogic();
+    this.setupFormAndLogic();
   }
 
   get sortedFields(): FormFieldConfig[] {
@@ -61,12 +64,15 @@ export class DynamicFormComponent implements OnInit {
   }
 
   isFieldVisible(field: FormFieldConfig): boolean {
+    if (field.key === 'adminNotes') {
+      console.log('adminNotes visibility:', this.fieldVisibility[field.key] !== false);
+    }
     return this.fieldVisibility[field.key] !== false;
   }
 
   private initializeFieldVisibility() {
     this.fields().forEach(field => {
-      this.fieldVisibility[field.key] = !field.conditionalLogic?.length;
+      this.fieldVisibility = { ...this.fieldVisibility, [field.key]: !field.conditionalLogic?.length };
     });
   }
 
@@ -76,6 +82,7 @@ export class DynamicFormComponent implements OnInit {
         field.conditionalLogic.forEach(rule => {
           const dependentControl = this.dynamicForm.get(rule.dependsOn);
           if (dependentControl) {
+            this.evaluateConditionalLogic(field.key);
             dependentControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
               this.evaluateConditionalLogic(field.key);
             });
@@ -119,10 +126,10 @@ export class DynamicFormComponent implements OnInit {
 
     switch (action) {
       case 'show':
-        this.fieldVisibility[fieldKey] = shouldApply;
+        this.fieldVisibility = { ...this.fieldVisibility, [fieldKey]: shouldApply };
         break;
       case 'hide':
-        this.fieldVisibility[fieldKey] = !shouldApply;
+        this.fieldVisibility = { ...this.fieldVisibility, [fieldKey]: !shouldApply };
         break;
       case 'enable':
         if (control) {
@@ -137,6 +144,13 @@ export class DynamicFormComponent implements OnInit {
     }
   }
 
+  private setupFormAndLogic() {
+    this.dynamicForm = this.dynamicFormService.createFormGroup(this.fields());
+    this.initializeFieldVisibility();
+    this.setupConditionalLogic();
+    this.changeDetectorRef.markForCheck();
+  }
+
   private markAllFieldsAsTouched() {
     Object.keys(this.dynamicForm.controls).forEach(key => {
       this.dynamicForm.get(key)?.markAsTouched();

From b094d5a7f377bd78a53a4853b74c7b9dd32c84ed Mon Sep 17 00:00:00 2001
From: erdemcaygor <erdem.caygor@gmail.com>
Date: Thu, 9 Oct 2025 11:41:56 +0300
Subject: [PATCH 12/25] dynamic form field validator func updated

---
 .../dynamic-form-field.component.html         | 192 +++++++++---------
 .../dynamic-form-field.component.ts           |  36 +++-
 .../src/dynamic-form.component.html           |  22 +-
 3 files changed, 131 insertions(+), 119 deletions(-)

diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
index f82083e95a..ab786eaf94 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
@@ -1,100 +1,98 @@
 @if (visible()) {
-    @if (field().type === 'text') {
-      <!-- Text Input -->
-      <div class="form-group">
-        <label [for]="field().key">{{ field().label }}</label>
-        <input
-          [id]="field().key"
-          [placeholder]="field().placeholder || ''"
-          [ngModel]="value"
-          (ngModelChange)="onValueChange($event)"
-          [class.is-invalid]="isValid"
-          class="form-control">
-        <!--      @if (isFieldInvalid()) {
-                <div class="invalid-feedback">
-                  {{ getErrorMessage() }}
-                </div>
-              }-->
-      </div>
-    } @else if (field().type === 'select') {
-      <!-- Select Dropdown -->
-      <div class="form-group">
-        <label [for]="field().key">{{ field().label }}</label>
-        <select
-          [id]="field().key"
-          [ngModel]="value"
-          (ngModelChange)="onValueChange($event)"
-          [class.is-invalid]="isValid"
-          class="form-control">
-          <option value="">Please select...</option>
-          @for (option of field().options; track option.key) {
-            <option
-              [value]="option.key">
-              {{ option.value }}
-            </option>
-          }
-        </select>
-        <!--      @if (isFieldInvalid()) {
-                <div class="invalid-feedback">
-                  {{ getErrorMessage() }}
-                </div>
-              }-->
-      </div>
-    } @else if (field().type === 'checkbox') {
-      <!-- Checkbox -->
-      <div class="form-group form-check">
-        <input
-          type="checkbox"
-          [id]="field().key"
-          [ngModel]="value"
-          (ngModelChange)="onValueChange($event)"
-          [class.is-invalid]="isValid"
-          class="form-check-input">
-        <label class="form-check-label" [for]="field().key">
-          {{ field().label }}
-        </label>
-        <!--      @if (isFieldInvalid()) {
-                <div class="invalid-feedback">
-                  {{ getErrorMessage() }}
-                </div>
-              }-->
-      </div>
-    } @else if (field().type === 'email') {
-      <!-- Email Input -->
-      <div class="form-group">
-        <label [for]="field().key">{{ field().label }}</label>
-        <input
-          type="email"
-          [id]="field().key"
-          [ngModel]="value"
-          (ngModelChange)="onValueChange($event)"
-          [placeholder]="field().placeholder || ''"
-          [class.is-invalid]="isValid"
-          class="form-control">
-        <!--      @if (isFieldInvalid()) {
-                <div class="invalid-feedback">
-                  {{ getErrorMessage() }}
-                </div>
-              }-->
-      </div>
-    } @else if (field().type === 'textarea') {
-      <!-- Textarea -->
-      <div class="form-group">
-        <label [for]="field().key">{{ field().label }}</label>
-        <textarea
-          [id]="field().key"
-          [ngModel]="value"
-          (ngModelChange)="onValueChange($event)"
-          [placeholder]="field().placeholder || ''"
-          [class.is-invalid]="isValid"
-          rows="4"
-          class="form-control">
+  @if (field().type === 'text') {
+    <!-- Text Input -->
+    <div class="form-group">
+      <label [for]="field().key">{{ field().label }}</label>
+      <input
+        [id]="field().key"
+        [placeholder]="field().placeholder || ''"
+        [ngModel]="value"
+        (ngModelChange)="onValueChange($event)"
+        [class.is-invalid]="isInvalid"
+        class="form-control">
+      @if (isInvalid) {
+        <ng-container [ngTemplateOutlet]="errorTemplate"/>
+      }
+    </div>
+  } @else if (field().type === 'select') {
+    <!-- Select Dropdown -->
+    <div class="form-group">
+      <label [for]="field().key">{{ field().label }}</label>
+      <select
+        [id]="field().key"
+        [ngModel]="value"
+        (ngModelChange)="onValueChange($event)"
+        [class.is-invalid]="isInvalid"
+        class="form-control">
+        <option value="">Please select...</option>
+        @for (option of field().options; track option.key) {
+          <option
+            [value]="option.key">
+            {{ option.value }}
+          </option>
+        }
+      </select>
+      @if (isInvalid) {
+        <ng-container [ngTemplateOutlet]="errorTemplate"/>
+      }
+    </div>
+  } @else if (field().type === 'checkbox') {
+    <!-- Checkbox -->
+    <div class="form-group form-check">
+      <input
+        type="checkbox"
+        [id]="field().key"
+        [ngModel]="value"
+        (ngModelChange)="onValueChange($event)"
+        [class.is-invalid]="isInvalid"
+        class="form-check-input">
+      <label class="form-check-label" [for]="field().key">
+        {{ field().label }}
+      </label>
+      @if (isInvalid) {
+        <ng-container [ngTemplateOutlet]="errorTemplate"/>
+      }
+    </div>
+  } @else if (field().type === 'email') {
+    <!-- Email Input -->
+    <div class="form-group">
+      <label [for]="field().key">{{ field().label }}</label>
+      <input
+        type="email"
+        [id]="field().key"
+        [ngModel]="value"
+        (ngModelChange)="onValueChange($event)"
+        [placeholder]="field().placeholder || ''"
+        [class.is-invalid]="isInvalid"
+        class="form-control">
+      @if (isInvalid) {
+        <ng-container [ngTemplateOutlet]="errorTemplate"/>
+      }
+    </div>
+  } @else if (field().type === 'textarea') {
+    <!-- Textarea -->
+    <div class="form-group">
+      <label [for]="field().key">{{ field().label }}</label>
+      <textarea
+        [id]="field().key"
+        [ngModel]="value"
+        (ngModelChange)="onValueChange($event)"
+        [placeholder]="field().placeholder || ''"
+        [class.is-invalid]="isInvalid"
+        rows="4"
+        class="form-control">
         </textarea>
-        <!--      @if (isFieldInvalid()) {
-                <div class="invalid-feedback">
-                  {{ getErrorMessage() }}
-                </div>
-              }-->
-      </div>
-    }
+      @if (isInvalid) {
+        <ng-container [ngTemplateOutlet]="errorTemplate"/>
+      }
+    </div>
+  }
 }
+
+<ng-template #errorTemplate>
+  <div class="invalid-feedback">
+    @for (error of errors; track error) {
+      <div>{{ error }}</div>
+    }
+  </div>
+</ng-template>
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
index 32f0de1543..4aaa465c39 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
@@ -9,22 +9,18 @@ import {
   input,
   OnInit,
 } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
 import { FormFieldConfig } from '../dynamic-form.models';
 import {
-  AbstractControl,
   ControlValueAccessor,
   FormControl,
   FormControlName,
   FormGroupDirective,
   FormsModule,
-  NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
-  NgControl,
-  ValidationErrors,
-  Validators,
+  NgControl
 } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NgTemplateOutlet } from '@angular/common';
 
 export const ABP_DYNAMIC_FORM_FIELD = new InjectionToken<DynamicFormFieldComponent>('AbpDynamicFormField');
 
@@ -45,14 +41,13 @@ const DYNAMIC_FORM_FIELD_CONTROL_VALUE_ACCESSOR = {
   host: { class: 'abp-dynamic-form-field' },
   exportAs: 'abpDynamicFormField',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [FormsModule],
+  imports: [FormsModule, NgTemplateOutlet],
 })
 export class DynamicFormFieldComponent implements OnInit, ControlValueAccessor {
   field = input.required<FormFieldConfig>();
   visible = input<boolean>(true);
   disabled = false;
   value: any;
-  isFieldInvalid: boolean = false;
   control!: FormControl;
   readonly changeDetectorRef = inject(ChangeDetectorRef);
   readonly destroyRef = inject(DestroyRef);
@@ -88,11 +83,30 @@ export class DynamicFormFieldComponent implements OnInit, ControlValueAccessor {
     this.changeDetectorRef.markForCheck();
   }
 
-  get isValid(): boolean {
+  get isInvalid(): boolean {
     if (this.control) {
-      return this.control.invalid && (this.control.dirty || this.control.touched);
+      return (this.control.invalid && (this.control.dirty || this.control.touched));
+    }
+    return false;
+  }
+
+  get errors(): string[] {
+    if (this.control && this.control.errors) {
+      const errorKeys = Object.keys(this.control.errors);
+      return errorKeys.map(key => {
+        const validator = this.field().validators.find(v => v.type.toLowerCase() === key.toLowerCase());
+        console.log(this.field().validators, key);
+        if (validator && validator.message) {
+          return validator.message;
+        }
+        // Fallback error messages
+        if (key === 'required') return `${this.field().label} is required`;
+        if (key === 'email') return 'Please enter a valid email address';
+        if (key === 'minlength') return `Minimum length is ${this.control.errors[key].requiredLength}`;
+        if (key === 'maxlength') return `Maximum length is ${this.control.errors[key].requiredLength}`;
+        return `${this.field().label} is invalid due to ${key} validation.`;
+      });
     }
-    return true;
   }
 
   private onChange: (value: any) => void = () => {};
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html
index e7b10338a6..d9e86e3502 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html
@@ -1,15 +1,15 @@
 <form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()" class="dynamic-form">
-  @for (field of sortedFields; track field.key) {
-    <div class="row">
-      <div [ngClass]="'col-md-' + (field.gridSize || 12)">
-        <abp-dynamic-form-field
-          [field]="field"
-          [formControlName]="field.key"
-          [visible]="isFieldVisible(field)">
-        </abp-dynamic-form-field>
-      </div>
-    </div>
-  }
+  <div class="row">
+    @for (field of sortedFields; track field.key) {
+        <div [ngClass]="'col-md-' + (field.gridSize || 12)">
+          <abp-dynamic-form-field
+            [field]="field"
+            [formControlName]="field.key"
+            [visible]="isFieldVisible(field)">
+          </abp-dynamic-form-field>
+        </div>
+    }
+  </div>
   <ng-content select="[actions]">
     <ng-container [ngTemplateOutlet]="defaultActions"></ng-container>
   </ng-content>

From 32f4047322b069dfb38c4221d94d1de8ca66d870 Mon Sep 17 00:00:00 2001
From: erdemcaygor <erdem.caygor@gmail.com>
Date: Thu, 9 Oct 2025 13:23:20 +0300
Subject: [PATCH 13/25] localization added for error messages

---
 .../src/dynamic-form-field/dynamic-form-field.component.html   | 2 +-
 .../src/dynamic-form-field/dynamic-form-field.component.ts     | 3 ++-
 .../components/dynamic-form/src/dynamic-form.component.html    | 2 ++
 .../components/dynamic-form/src/dynamic-form.component.scss    | 3 +++
 4 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
index ab786eaf94..0dc1ee36b5 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
@@ -92,7 +92,7 @@
 <ng-template #errorTemplate>
   <div class="invalid-feedback">
     @for (error of errors; track error) {
-      <div>{{ error }}</div>
+      <div>{{ error | abpLocalization }}</div>
     }
   </div>
 </ng-template>
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
index 4aaa465c39..d7f0e2ecec 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
@@ -21,6 +21,7 @@ import {
 } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgTemplateOutlet } from '@angular/common';
+import { LocalizationPipe } from '@abp/ng.core';
 
 export const ABP_DYNAMIC_FORM_FIELD = new InjectionToken<DynamicFormFieldComponent>('AbpDynamicFormField');
 
@@ -41,7 +42,7 @@ const DYNAMIC_FORM_FIELD_CONTROL_VALUE_ACCESSOR = {
   host: { class: 'abp-dynamic-form-field' },
   exportAs: 'abpDynamicFormField',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [FormsModule, NgTemplateOutlet],
+  imports: [FormsModule, NgTemplateOutlet, LocalizationPipe],
 })
 export class DynamicFormFieldComponent implements OnInit, ControlValueAccessor {
   field = input.required<FormFieldConfig>();
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html
index d9e86e3502..c71afcf646 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html
@@ -1,3 +1,4 @@
+<div class="form-wrapper">
 <form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()" class="dynamic-form">
   <div class="row">
     @for (field of sortedFields; track field.key) {
@@ -34,3 +35,4 @@
     </button>
   </div>
 </ng-template>
+</div>
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.scss b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.scss
index f82cbec465..038d8eed94 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.scss
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.scss
@@ -4,6 +4,9 @@
     flex-direction: column;
     gap: 0.5rem;
   }
+  .form-wrapper {
+    text-align: left;
+  }
 }
 .form-actions {
   display: flex;

From 6ba116593a449612cce9c259cde312406929556e Mon Sep 17 00:00:00 2001
From: erdemcaygor <erdem.caygor@gmail.com>
Date: Thu, 9 Oct 2025 13:46:19 +0300
Subject: [PATCH 14/25] refactoring

---
 .../dynamic-form-field.component.html                  | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
index 0dc1ee36b5..a1044eba17 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
@@ -2,7 +2,7 @@
   @if (field().type === 'text') {
     <!-- Text Input -->
     <div class="form-group">
-      <label [for]="field().key">{{ field().label }}</label>
+      <ng-container [ngTemplateOutlet]="labelTemplate" />
       <input
         [id]="field().key"
         [placeholder]="field().placeholder || ''"
@@ -17,7 +17,7 @@
   } @else if (field().type === 'select') {
     <!-- Select Dropdown -->
     <div class="form-group">
-      <label [for]="field().key">{{ field().label }}</label>
+    <ng-container [ngTemplateOutlet]="labelTemplate" />
       <select
         [id]="field().key"
         [ngModel]="value"
@@ -47,7 +47,7 @@
         [class.is-invalid]="isInvalid"
         class="form-check-input">
       <label class="form-check-label" [for]="field().key">
-        {{ field().label }}
+        {{ field().label | abpLocalization }}
       </label>
       @if (isInvalid) {
         <ng-container [ngTemplateOutlet]="errorTemplate"/>
@@ -89,6 +89,10 @@
   }
 }
 
+<ng-template #labelTemplate>
+  <label [for]="field().key">{{ field().label | abpLocalization }}</label>
+</ng-template>
+
 <ng-template #errorTemplate>
   <div class="invalid-feedback">
     @for (error of errors; track error) {

From 6e4179f6454d7ffbd1b5161689927856f0f65006 Mon Sep 17 00:00:00 2001
From: erdemcaygor <erdem.caygor@gmail.com>
Date: Thu, 9 Oct 2025 16:59:06 +0300
Subject: [PATCH 15/25] reset form function added

---
 .../dynamic-form-field.component.html         | 169 +++++++++---------
 .../dynamic-form-field.component.ts           |  37 ++--
 .../src/dynamic-form.component.html           |   2 +-
 .../src/dynamic-form.component.ts             |  37 ++--
 .../dynamic-form/src/dynamic-form.models.ts   |   2 +-
 .../dynamic-form/src/dynamic-form.service.ts  |  22 ++-
 6 files changed, 155 insertions(+), 114 deletions(-)

diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
index a1044eba17..b2b95a5e3c 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
@@ -1,92 +1,89 @@
 @if (visible()) {
-  @if (field().type === 'text') {
-    <!-- Text Input -->
-    <div class="form-group">
-      <ng-container [ngTemplateOutlet]="labelTemplate" />
-      <input
-        [id]="field().key"
-        [placeholder]="field().placeholder || ''"
-        [ngModel]="value"
-        (ngModelChange)="onValueChange($event)"
-        [class.is-invalid]="isInvalid"
-        class="form-control">
-      @if (isInvalid) {
-        <ng-container [ngTemplateOutlet]="errorTemplate"/>
-      }
-    </div>
-  } @else if (field().type === 'select') {
-    <!-- Select Dropdown -->
-    <div class="form-group">
-    <ng-container [ngTemplateOutlet]="labelTemplate" />
-      <select
-        [id]="field().key"
-        [ngModel]="value"
-        (ngModelChange)="onValueChange($event)"
-        [class.is-invalid]="isInvalid"
-        class="form-control">
-        <option value="">Please select...</option>
-        @for (option of field().options; track option.key) {
-          <option
-            [value]="option.key">
-            {{ option.value }}
-          </option>
+  <div [formGroup]="fieldFormGroup">
+    @if (field().type === 'text') {
+      <!-- Text Input -->
+      <div class="form-group">
+        <ng-container [ngTemplateOutlet]="labelTemplate" />
+        <input
+          [id]="field().key"
+          [placeholder]="field().placeholder || ''"
+          formControlName="value"
+          [class.is-invalid]="isInvalid"
+          class="form-control">
+        @if (isInvalid) {
+          <ng-container [ngTemplateOutlet]="errorTemplate"/>
         }
-      </select>
-      @if (isInvalid) {
-        <ng-container [ngTemplateOutlet]="errorTemplate"/>
-      }
-    </div>
-  } @else if (field().type === 'checkbox') {
-    <!-- Checkbox -->
-    <div class="form-group form-check">
-      <input
-        type="checkbox"
-        [id]="field().key"
-        [ngModel]="value"
-        (ngModelChange)="onValueChange($event)"
-        [class.is-invalid]="isInvalid"
-        class="form-check-input">
-      <label class="form-check-label" [for]="field().key">
-        {{ field().label | abpLocalization }}
-      </label>
-      @if (isInvalid) {
-        <ng-container [ngTemplateOutlet]="errorTemplate"/>
-      }
-    </div>
-  } @else if (field().type === 'email') {
-    <!-- Email Input -->
-    <div class="form-group">
-      <label [for]="field().key">{{ field().label }}</label>
-      <input
-        type="email"
-        [id]="field().key"
-        [ngModel]="value"
-        (ngModelChange)="onValueChange($event)"
-        [placeholder]="field().placeholder || ''"
-        [class.is-invalid]="isInvalid"
-        class="form-control">
-      @if (isInvalid) {
-        <ng-container [ngTemplateOutlet]="errorTemplate"/>
-      }
-    </div>
-  } @else if (field().type === 'textarea') {
-    <!-- Textarea -->
-    <div class="form-group">
-      <label [for]="field().key">{{ field().label }}</label>
-      <textarea
-        [id]="field().key"
-        [ngModel]="value"
-        (ngModelChange)="onValueChange($event)"
-        [placeholder]="field().placeholder || ''"
-        [class.is-invalid]="isInvalid"
-        rows="4"
-        class="form-control">
+      </div>
+    } @else if (field().type === 'select') {
+      <!-- Select Dropdown -->
+      <div class="form-group">
+        <ng-container [ngTemplateOutlet]="labelTemplate" />
+        <select
+          [id]="field().key"
+          formControlName="value"
+          [class.is-invalid]="isInvalid"
+          class="form-control">
+          <option value="">Please select...</option>
+          @for (option of field().options; track option.key) {
+            <option
+              [value]="option.key">
+              {{ option.value }}
+            </option>
+          }
+        </select>
+        @if (isInvalid) {
+          <ng-container [ngTemplateOutlet]="errorTemplate"/>
+        }
+      </div>
+    } @else if (field().type === 'checkbox') {
+      <!-- Checkbox -->
+      <div class="form-group form-check">
+        <input
+          type="checkbox"
+          [id]="field().key"
+          formControlName="value"
+          [class.is-invalid]="isInvalid"
+          class="form-check-input">
+        <label class="form-check-label" [for]="field().key">
+          {{ field().label | abpLocalization }}
+        </label>
+        @if (isInvalid) {
+          <ng-container [ngTemplateOutlet]="errorTemplate"/>
+        }
+      </div>
+    } @else if (field().type === 'email') {
+      <!-- Email Input -->
+      <div class="form-group">
+        <label [for]="field().key">{{ field().label }}</label>
+        <input
+          type="email"
+          [id]="field().key"
+          formControlName="value"
+          [placeholder]="field().placeholder || ''"
+          [class.is-invalid]="isInvalid"
+          class="form-control">
+        @if (isInvalid) {
+          <ng-container [ngTemplateOutlet]="errorTemplate"/>
+        }
+      </div>
+    } @else if (field().type === 'textarea') {
+      <!-- Textarea -->
+      <div class="form-group">
+        <label [for]="field().key">{{ field().label }}</label>
+        <textarea
+          [id]="field().key"
+          formControlName="value"
+          [placeholder]="field().placeholder || ''"
+          [class.is-invalid]="isInvalid"
+          rows="4"
+          class="form-control">
         </textarea>
-      @if (isInvalid) {
-        <ng-container [ngTemplateOutlet]="errorTemplate"/>
-      }
-    </div>
-  }
+        @if (isInvalid) {
+          <ng-container [ngTemplateOutlet]="errorTemplate"/>
+        }
+      </div>
+    }
+  </div>
 }
 
 <ng-template #labelTemplate>
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
index d7f0e2ecec..0d820a1711 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
@@ -12,12 +12,15 @@ import {
 import { FormFieldConfig } from '../dynamic-form.models';
 import {
   ControlValueAccessor,
+  FormBuilder,
   FormControl,
   FormControlName,
   FormGroupDirective,
   FormsModule,
   NG_VALUE_ACCESSOR,
-  NgControl
+  NgControl,
+  FormGroup,
+  ReactiveFormsModule,
 } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgTemplateOutlet } from '@angular/common';
@@ -42,32 +45,36 @@ const DYNAMIC_FORM_FIELD_CONTROL_VALUE_ACCESSOR = {
   host: { class: 'abp-dynamic-form-field' },
   exportAs: 'abpDynamicFormField',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [FormsModule, NgTemplateOutlet, LocalizationPipe],
+  imports: [FormsModule, NgTemplateOutlet, LocalizationPipe, ReactiveFormsModule],
 })
 export class DynamicFormFieldComponent implements OnInit, ControlValueAccessor {
   field = input.required<FormFieldConfig>();
   visible = input<boolean>(true);
-  disabled = false;
-  value: any;
   control!: FormControl;
+  fieldFormGroup: FormGroup;
   readonly changeDetectorRef = inject(ChangeDetectorRef);
   readonly destroyRef = inject(DestroyRef);
   private injector = inject(Injector);
+  private formBuilder = inject(FormBuilder);
+
+  constructor() {
+    this.fieldFormGroup = this.formBuilder.group({
+      value: [{ value: '' }]
+    });
+  }
 
   ngOnInit() {
     const ngControl = this.injector.get(NgControl, null);
     if (ngControl) {
       this.control = this.injector.get(FormGroupDirective).getControl(ngControl as FormControlName);
     }
-  }
-
-  onValueChange(value: any) {
-    this.onChange(value);
-    this.changeDetectorRef.markForCheck();
+    this.value.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
+      this.onChange(value);
+    });
   }
 
   writeValue(value: any[]): void {
-    this.value = value;
+    this.value.setValue(value || '');
     this.changeDetectorRef.markForCheck();
   }
 
@@ -80,7 +87,11 @@ export class DynamicFormFieldComponent implements OnInit, ControlValueAccessor {
   }
 
   setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
+    if (isDisabled) {
+      this.value.disable();
+    } else {
+      this.value.enable();
+    }
     this.changeDetectorRef.markForCheck();
   }
 
@@ -109,7 +120,9 @@ export class DynamicFormFieldComponent implements OnInit, ControlValueAccessor {
       });
     }
   }
-
+  get value() {
+    return this.fieldFormGroup.get('value');
+  }
   private onChange: (value: any) => void = () => {};
   private onTouched: () => void = () => {};
 }
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html
index c71afcf646..303365d960 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html
@@ -1,5 +1,5 @@
 <div class="form-wrapper">
-<form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()" class="dynamic-form">
+<form [formGroup]="dynamicForm" (ngSubmit)="submit()" class="dynamic-form">
   <div class="row">
     @for (field of sortedFields; track field.key) {
         <div [ngClass]="'col-md-' + (field.gridSize || 12)">
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
index 573335b638..e0a149e025 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
@@ -6,10 +6,9 @@ import {
   inject,
   OnInit,
   DestroyRef,
-  effect,
-  ChangeDetectorRef,
+  ChangeDetectorRef
 } from '@angular/core';
-import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DynamicFormService } from './dynamic-form.service';
@@ -22,15 +21,15 @@ import { DynamicFormFieldComponent } from './dynamic-form-field';
   styleUrls: ['./dynamic-form.component.scss'],
   host: { class: 'abp-dynamic-form' },
   changeDetection: ChangeDetectionStrategy.OnPush,
+  exportAs: 'abpDynamicForm',
   imports: [CommonModule, DynamicFormFieldComponent, ReactiveFormsModule],
 })
-
 export class DynamicFormComponent implements OnInit {
   fields = input<FormFieldConfig[]>([]);
   submitButtonText = input<string>('Submit');
   submitInProgress = input<boolean>(false);
   showCancelButton = input<boolean>(false);
-  formSubmit = output<void>();
+  onSubmit = output<any>();
   formCancel = output<void>();
   private dynamicFormService = inject(DynamicFormService);
   readonly destroyRef = inject(DestroyRef);
@@ -47,9 +46,10 @@ export class DynamicFormComponent implements OnInit {
     return this.fields().sort((a, b) => (a.order || 0) - (b.order || 0));
   }
 
-  onSubmit() {
+  submit() {
+    console.log(this.dynamicForm.valid, this.dynamicForm.value);
     if (this.dynamicForm.valid) {
-      this.formSubmit.emit(this.dynamicForm.value);
+      this.onSubmit.emit(this.dynamicForm.getRawValue());
     } else {
       this.markAllFieldsAsTouched();
     }
@@ -70,9 +70,22 @@ export class DynamicFormComponent implements OnInit {
     return this.fieldVisibility[field.key] !== false;
   }
 
+  resetForm() {
+    const initialValues: { [key: string]: any } = this.dynamicFormService.getInitialValues(
+      this.fields(),
+    );
+    this.dynamicForm.reset({...initialValues});
+    this.dynamicForm.markAsUntouched();
+    this.dynamicForm.markAsPristine();
+    this.changeDetectorRef.markForCheck();
+  }
+
   private initializeFieldVisibility() {
     this.fields().forEach(field => {
-      this.fieldVisibility = { ...this.fieldVisibility, [field.key]: !field.conditionalLogic?.length };
+      this.fieldVisibility = {
+        ...this.fieldVisibility,
+        [field.key]: !field.conditionalLogic?.length,
+      };
     });
   }
 
@@ -83,9 +96,11 @@ export class DynamicFormComponent implements OnInit {
           const dependentControl = this.dynamicForm.get(rule.dependsOn);
           if (dependentControl) {
             this.evaluateConditionalLogic(field.key);
-            dependentControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-              this.evaluateConditionalLogic(field.key);
-            });
+            dependentControl.valueChanges
+              .pipe(takeUntilDestroyed(this.destroyRef))
+              .subscribe(() => {
+                this.evaluateConditionalLogic(field.key);
+              });
           }
         });
       }
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.models.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.models.ts
index 9ba75484c5..8323a84ade 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.models.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.models.ts
@@ -14,7 +14,7 @@ export interface FormFieldConfig {
 }
 
 export interface ValidatorConfig {
-  type: 'required' | 'email' | 'minLength' | 'maxLength' | 'pattern' | 'custom';
+  type: 'required' | 'email' | 'minLength' | 'maxLength' | 'pattern' | 'custom' | 'min' | 'max' | 'requiredTrue';
   value?: any;
   message: string;
 }
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.service.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.service.ts
index 4399e8822d..d5c90bc70a 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.service.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.service.ts
@@ -1,5 +1,5 @@
-import {Injectable} from '@angular/core';
-import {FormControl, FormGroup, ValidatorFn, Validators} from '@angular/forms';
+import {Injectable, inject} from '@angular/core';
+import {FormControl, FormGroup, ValidatorFn, Validators, FormBuilder} from '@angular/forms';
 import {FormFieldConfig, ValidatorConfig} from './dynamic-form.models';
 
 @Injectable({
@@ -8,6 +8,8 @@ import {FormFieldConfig, ValidatorConfig} from './dynamic-form.models';
 
 export class DynamicFormService {
 
+  private formBuilder = inject(FormBuilder);
+
   createFormGroup(fields: FormFieldConfig[]): FormGroup {
     const group: any = {};
 
@@ -21,7 +23,15 @@ export class DynamicFormService {
       }, validators);
     });
 
-    return new FormGroup(group);
+    return this.formBuilder.group(group);
+  }
+
+  getInitialValues(fields: FormFieldConfig[]): any {
+    const initialValues: any = {};
+    fields.forEach(field => {
+      initialValues[field.key] = this.getInitialValue(field);
+    });
+    return initialValues;
   }
 
   private buildValidators(validatorConfigs: ValidatorConfig[]): ValidatorFn[] {
@@ -37,6 +47,12 @@ export class DynamicFormService {
           return Validators.maxLength(config.value);
         case 'pattern':
           return Validators.pattern(config.value);
+        case 'min':
+          return Validators.min(config.value);
+        case 'max':
+          return Validators.max(config.value);
+        case 'requiredTrue':
+          return Validators.requiredTrue;
         default:
           return Validators.nullValidator;
       }

From d66c8d60a8563b8ee99f734e72afefac965f5021 Mon Sep 17 00:00:00 2001
From: erdemcaygor <erdem.caygor@gmail.com>
Date: Thu, 9 Oct 2025 17:07:48 +0300
Subject: [PATCH 16/25] refactoring

---
 .../src/dynamic-form-field/dynamic-form-field.component.ts     | 2 +-
 .../components/dynamic-form/src/dynamic-form.component.ts      | 3 ---
 npm/ng-packs/packages/components/tsconfig.lib.json             | 2 +-
 3 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
index 0d820a1711..fce9058680 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
@@ -45,7 +45,7 @@ const DYNAMIC_FORM_FIELD_CONTROL_VALUE_ACCESSOR = {
   host: { class: 'abp-dynamic-form-field' },
   exportAs: 'abpDynamicFormField',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [FormsModule, NgTemplateOutlet, LocalizationPipe, ReactiveFormsModule],
+  imports: [NgTemplateOutlet, LocalizationPipe, ReactiveFormsModule],
 })
 export class DynamicFormFieldComponent implements OnInit, ControlValueAccessor {
   field = input.required<FormFieldConfig>();
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
index e0a149e025..23c2302906 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
@@ -64,9 +64,6 @@ export class DynamicFormComponent implements OnInit {
   }
 
   isFieldVisible(field: FormFieldConfig): boolean {
-    if (field.key === 'adminNotes') {
-      console.log('adminNotes visibility:', this.fieldVisibility[field.key] !== false);
-    }
     return this.fieldVisibility[field.key] !== false;
   }
 
diff --git a/npm/ng-packs/packages/components/tsconfig.lib.json b/npm/ng-packs/packages/components/tsconfig.lib.json
index 478ba03368..22d2695db8 100644
--- a/npm/ng-packs/packages/components/tsconfig.lib.json
+++ b/npm/ng-packs/packages/components/tsconfig.lib.json
@@ -10,6 +10,6 @@
     "lib": ["dom", "es2020"],
     "useDefineForClassFields": false
   },
-  "exclude": ["test-setup.ts", "**/*.spec.ts", "jest.config.ts"],
+  "exclude": ["src/test-setup.ts", "**/*.spec.ts", "jest.config.ts"],
   "include": ["**/*.ts"]
 }

From 1963745f8ad552d00ffa76300a899e7f0b06d3b9 Mon Sep 17 00:00:00 2001
From: erdemcaygor <erdem.caygor@gmail.com>
Date: Fri, 10 Oct 2025 11:35:04 +0300
Subject: [PATCH 17/25] reset form function added

---
 .../dev-app/src/app/home/home.component.html  |  4 +-
 .../dev-app/src/app/home/home.component.ts    | 84 ++++++++++++++++++-
 npm/ng-packs/apps/dev-app/src/server.ts       |  4 +-
 .../src/dynamic-form.component.ts             |  8 +-
 4 files changed, 91 insertions(+), 9 deletions(-)

diff --git a/npm/ng-packs/apps/dev-app/src/app/home/home.component.html b/npm/ng-packs/apps/dev-app/src/app/home/home.component.html
index 9f6de55327..466c08d824 100644
--- a/npm/ng-packs/apps/dev-app/src/app/home/home.component.html
+++ b/npm/ng-packs/apps/dev-app/src/app/home/home.component.html
@@ -1,4 +1,6 @@
 <div class="container">
+  <abp-dynamic-form [fields]="formFields" (onSubmit)="submit($event)">
+  </abp-dynamic-form>
   <div class="p-5 text-center">
     <div class="d-inline-block bg-success text-white p-1 h5 rounded mb-4" role="alert">
       <h5 class="m-1">
@@ -7,8 +9,6 @@ <h5 class="m-1">
       </h5>
     </div>
 
-    <abp-dynamic-form [fields]="formFields"></abp-dynamic-form>
-
     <h1>{{ '::Welcome' | abpLocalization }}</h1>
 
     <p class="lead px-lg-5 mx-lg-5">{{ '::LongWelcomeMessage' | abpLocalization }}</p>
diff --git a/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts b/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts
index 44bf9f269e..6afd17a90c 100644
--- a/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts
+++ b/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts
@@ -1,21 +1,99 @@
 import { AuthService, LocalizationPipe } from '@abp/ng.core';
-import { Component, inject } from '@angular/core';
+import { Component, inject, ViewChild } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { ButtonComponent, CardBodyComponent, CardComponent } from '@abp/ng.theme.shared';
+import { DynamicFormComponent, FormFieldConfig } from '@abp/ng.components/dynamic-form';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
-  imports: [NgTemplateOutlet, LocalizationPipe, CardComponent, CardBodyComponent, ButtonComponent],
+  imports: [NgTemplateOutlet, LocalizationPipe, CardComponent, CardBodyComponent, ButtonComponent, DynamicFormComponent],
 })
 export class HomeComponent {
+  @ViewChild(DynamicFormComponent, { static: true }) dynamicFormComponent: DynamicFormComponent;
   protected readonly authService = inject(AuthService);
-
+  formFields: FormFieldConfig[] = [
+    {
+      key: 'firstName',
+      type: 'text',
+      label: 'First Name',
+      placeholder: 'Enter first name',
+      value: 'erdemc',
+      required: true,
+      validators: [
+        { type: 'required', message: 'First name is required' },
+        { type: 'minLength', value: 2, message: 'Minimum 2 characters required' }
+      ],
+      gridSize: 6,
+      order: 1
+    },
+    {
+      key: 'lastName',
+      type: 'text',
+      label: 'Last Name',
+      placeholder: 'Enter last name',
+      required: true,
+      validators: [
+        { type: 'required', message: 'Last name is required' }
+      ],
+      gridSize: 12,
+      order: 3
+    },
+    {
+      key: 'email',
+      type: 'email',
+      label: 'Email Address',
+      placeholder: 'Enter email',
+      required: true,
+      validators: [
+        { type: 'required', message: 'Email is required' },
+        { type: 'email', message: 'Please enter a valid email' }
+      ],
+      gridSize: 6,
+      order: 2
+    },
+    {
+      key: 'userType',
+      type: 'select',
+      label: 'User Type',
+      required: true,
+      options: [
+        { key: 'admin', value: 'Administrator' },
+        { key: 'user', value: 'Regular User' },
+        { key: 'guest', value: 'Guest User' }
+      ],
+      validators: [
+        { type: 'required', message: 'Please select user type' }
+      ],
+      order: 4
+    },
+    {
+      key: 'adminNotes',
+      type: 'textarea',
+      label: 'Admin Notes',
+      placeholder: 'Enter admin-specific notes',
+      conditionalLogic: [
+        {
+          dependsOn: 'userType',
+          condition: 'equals',
+          value: 'admin',
+          action: 'show'
+        }
+      ],
+      order: 5
+    }
+  ];
   loading = false;
+
   get hasLoggedIn(): boolean {
     return this.authService.isAuthenticated;
   }
 
+  submit(val) {
+    console.log('submit', val);
+    this.dynamicFormComponent.resetForm();
+  }
+
   login() {
     this.loading = true;
     this.authService.navigateToLogin();
diff --git a/npm/ng-packs/apps/dev-app/src/server.ts b/npm/ng-packs/apps/dev-app/src/server.ts
index a8d7558341..fb45c1dec0 100644
--- a/npm/ng-packs/apps/dev-app/src/server.ts
+++ b/npm/ng-packs/apps/dev-app/src/server.ts
@@ -11,9 +11,7 @@ import {environment} from './environments/environment';
 import * as oidc from 'openid-client';
 import { ServerCookieParser } from '@abp/ng.core';
 
-if (environment.production === false) {
-  process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = "0";
-}
+process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = "0";
 
 const serverDistFolder = dirname(fileURLToPath(import.meta.url));
 const browserDistFolder = resolve(serverDistFolder, '../browser');
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
index 23c2302906..294043fc47 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
@@ -6,7 +6,8 @@ import {
   inject,
   OnInit,
   DestroyRef,
-  ChangeDetectorRef
+  ChangeDetectorRef,
+  effect,
 } from '@angular/core';
 import { FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
@@ -26,6 +27,7 @@ import { DynamicFormFieldComponent } from './dynamic-form-field';
 })
 export class DynamicFormComponent implements OnInit {
   fields = input<FormFieldConfig[]>([]);
+  values = input<Record<string, any>>();
   submitButtonText = input<string>('Submit');
   submitInProgress = input<boolean>(false);
   showCancelButton = input<boolean>(false);
@@ -40,6 +42,10 @@ export class DynamicFormComponent implements OnInit {
 
   ngOnInit() {
     this.setupFormAndLogic();
+
+    effect(() => {
+      console.log(this.values());
+    });
   }
 
   get sortedFields(): FormFieldConfig[] {

From a9486e92c45a23ce548717459d5856114cda510a Mon Sep 17 00:00:00 2001
From: erdemcaygor <erdem.caygor@gmail.com>
Date: Mon, 13 Oct 2025 16:26:27 +0300
Subject: [PATCH 18/25] dynamic form field host component added to custom form
 input

---
 .../dynamic-form-field-host.component.ts      | 134 ++++++++++++++++++
 .../src/dynamic-form-field/index.ts           |   1 +
 .../src/dynamic-form.component.html           |   8 ++
 .../src/dynamic-form.component.ts             |  24 +++-
 .../dynamic-form/src/dynamic-form.models.ts   |   2 +
 5 files changed, 165 insertions(+), 4 deletions(-)
 create mode 100644 npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field-host.component.ts

diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field-host.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field-host.component.ts
new file mode 100644
index 0000000000..6a3209a98e
--- /dev/null
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field-host.component.ts
@@ -0,0 +1,134 @@
+import {
+  Component, Input, ViewChild, ViewContainerRef, OnChanges, SimpleChanges,
+  ChangeDetectionStrategy, forwardRef, Type, Injector, effect, DestroyRef, inject
+} from '@angular/core';
+import {
+  ControlValueAccessor, NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule
+} from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
+type MaybeCVA = Partial<ControlValueAccessor> & { setDisabledState?(d: boolean): void };
+type WithFormControlInput = { formControl?: FormControl };
+
+@Component({
+  selector: 'abp-dynamic-form-field-host',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule],
+  template: `<ng-template #vc></ng-template>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => DynamicFieldHostComponent),
+    multi: true
+  }]
+})
+export class DynamicFieldHostComponent implements ControlValueAccessor, OnChanges {
+  @Input({ required: true }) component!: Type<any>;
+  @Input() inputs: Record<string, any> = {}; // field, visible, vs.
+
+  @ViewChild('vc', { read: ViewContainerRef, static: true }) vc!: ViewContainerRef;
+
+  private compRef?: any;
+  private onChange: (v: any) => void = () => {};
+  private onTouched: () => void = () => {};
+  private lastValue: any;
+  private disabled = false;
+
+  // Eğer child CVA değilse kullanmak üzere bir iç kontrol (opsiyonel)
+  private innerControl = new FormControl<any>(null);
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['component']) {
+      this.createChild();
+    } else if (this.compRef && changes['inputs']) {
+      this.applyInputs();
+    }
+  }
+
+  private createChild() {
+    this.vc.clear();
+    if (!this.component) return;
+
+    this.compRef = this.vc.createComponent(this.component);
+
+    // inputları ata
+    this.applyInputs();
+
+    // ÇOCUK TIPINI KONTROL ET: CVA mı?
+    const instance: any = this.compRef.instance as MaybeCVA & WithFormControlInput;
+
+    if (this.isCVA(instance)) {
+      // Child CVA ise wrapper -> child delege
+      instance.registerOnChange?.((v: any) => this.onChange(v));
+      instance.registerOnTouched?.(() => this.onTouched());
+      if (this.disabled && instance.setDisabledState) {
+        instance.setDisabledState(true);
+      }
+      // İlk değeri ilet
+      if (this.lastValue !== undefined) {
+        instance.writeValue?.(this.lastValue);
+      }
+    } else {
+      // Child CVA değilse, formControl input’u varsa köprüle
+      if ('formControl' in instance) {
+        instance.formControl = this.innerControl;
+        // son değeri uygula
+        if (this.lastValue !== undefined) {
+          this.innerControl.setValue(this.lastValue, { emitEvent: false });
+        }
+        this.innerControl.valueChanges.subscribe(v => this.onChange(v));
+        this.innerControl.disabled ? null : (this.disabled && this.innerControl.disable({ emitEvent: false }));
+      } else {
+        // Son çare: valueChange EventEmitter’ı varsa bağla (konvansiyonel)
+        if ('valueChange' in instance && instance['valueChange']?.subscribe) {
+          instance['valueChange'].subscribe((v: any) => this.onChange(v));
+        }
+      }
+    }
+  }
+
+  private applyInputs() {
+    if (!this.compRef) return;
+    const inst = this.compRef.instance;
+    for (const [k, v] of Object.entries(this.inputs ?? {})) {
+      inst[k] = v;
+    }
+    // change detection tetiklenebilir:
+    this.compRef.changeDetectorRef?.markForCheck?.();
+  }
+
+  private isCVA(obj: any): obj is MaybeCVA {
+    return obj && typeof obj.writeValue === 'function' && typeof obj.registerOnChange === 'function';
+  }
+
+  /* --------- CVA (wrapper) --------- */
+
+  writeValue(obj: any): void {
+    this.lastValue = obj;
+    if (!this.compRef) return;
+
+    const inst: any = this.compRef.instance as MaybeCVA & WithFormControlInput;
+
+    if (this.isCVA(inst)) {
+      inst.writeValue?.(obj);
+    } else if ('formControl' in inst && inst.formControl instanceof FormControl) {
+      inst.formControl.setValue(obj, { emitEvent: false });
+    }
+  }
+
+  registerOnChange(fn: any): void { this.onChange = fn; }
+  registerOnTouched(fn: any): void { this.onTouched = fn; }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+    if (!this.compRef) return;
+
+    const inst = this.compRef.instance as MaybeCVA & WithFormControlInput;
+
+    if (this.isCVA(inst) && inst.setDisabledState) {
+      inst.setDisabledState(isDisabled);
+    } else if ('formControl' in inst && inst.formControl instanceof FormControl) {
+      isDisabled ? inst.formControl.disable({ emitEvent: false }) : inst.formControl.enable({ emitEvent: false });
+    }
+  }
+}
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/index.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/index.ts
index ce487ae2a5..826f7c70d2 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/index.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/index.ts
@@ -1 +1,2 @@
 export * from './dynamic-form-field.component';
+export * from './dynamic-form-field-host.component';
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html
index 303365d960..006029afe8 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html
@@ -3,11 +3,19 @@
   <div class="row">
     @for (field of sortedFields; track field.key) {
         <div [ngClass]="'col-md-' + (field.gridSize || 12)">
+          @if (field.component) {
+            <app-dynamic-field-host
+              [component]="field.component"
+              [inputs]="{ field: field, visible: isFieldVisible(field) }"
+              formControlName="{{ field.key }}">
+            </app-dynamic-field-host>
+          } @else {
           <abp-dynamic-form-field
             [field]="field"
             [formControlName]="field.key"
             [visible]="isFieldVisible(field)">
           </abp-dynamic-form-field>
+          }
         </div>
     }
   </div>
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
index 294043fc47..9761f492c7 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
@@ -8,13 +8,18 @@ import {
   DestroyRef,
   ChangeDetectorRef,
   effect,
+  contentChild,
+  ContentChildren,
+  QueryList,
+  AfterContentInit,
 } from '@angular/core';
 import { FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DynamicFormService } from './dynamic-form.service';
 import { FormFieldConfig } from './dynamic-form.models';
-import { DynamicFormFieldComponent } from './dynamic-form-field';
+import { DynamicFormFieldComponent, DynamicInputDirective } from './dynamic-form-field';
+import { DynamicFieldHostComponent } from './dynamic-form-field/dynamic-form-field-host.component';
 
 @Component({
   selector: 'abp-dynamic-form',
@@ -23,9 +28,15 @@ import { DynamicFormFieldComponent } from './dynamic-form-field';
   host: { class: 'abp-dynamic-form' },
   changeDetection: ChangeDetectionStrategy.OnPush,
   exportAs: 'abpDynamicForm',
-  imports: [CommonModule, DynamicFormFieldComponent, ReactiveFormsModule],
+  imports: [
+    CommonModule,
+    DynamicFormFieldComponent,
+    ReactiveFormsModule,
+    DynamicInputDirective,
+    DynamicFieldHostComponent,
+  ],
 })
-export class DynamicFormComponent implements OnInit {
+export class DynamicFormComponent implements OnInit, AfterContentInit {
   fields = input<FormFieldConfig[]>([]);
   values = input<Record<string, any>>();
   submitButtonText = input<string>('Submit');
@@ -36,6 +47,7 @@ export class DynamicFormComponent implements OnInit {
   private dynamicFormService = inject(DynamicFormService);
   readonly destroyRef = inject(DestroyRef);
   readonly changeDetectorRef = inject(ChangeDetectorRef);
+  @ContentChildren(DynamicInputDirective) dynamicInputs: QueryList<DynamicInputDirective>;
 
   dynamicForm!: FormGroup;
   fieldVisibility: { [key: string]: boolean } = {};
@@ -48,6 +60,10 @@ export class DynamicFormComponent implements OnInit {
     });
   }
 
+  ngAfterContentInit() {
+    console.log(this.dynamicInputs.toArray());
+  }
+
   get sortedFields(): FormFieldConfig[] {
     return this.fields().sort((a, b) => (a.order || 0) - (b.order || 0));
   }
@@ -77,7 +93,7 @@ export class DynamicFormComponent implements OnInit {
     const initialValues: { [key: string]: any } = this.dynamicFormService.getInitialValues(
       this.fields(),
     );
-    this.dynamicForm.reset({...initialValues});
+    this.dynamicForm.reset({ ...initialValues });
     this.dynamicForm.markAsUntouched();
     this.dynamicForm.markAsPristine();
     this.changeDetectorRef.markForCheck();
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.models.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.models.ts
index 8323a84ade..7a32868957 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.models.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.models.ts
@@ -1,3 +1,4 @@
+
 export interface FormFieldConfig {
   key: string;
   value?: any;
@@ -11,6 +12,7 @@ export interface FormFieldConfig {
   conditionalLogic?: ConditionalRule[];
   order?: number;
   gridSize?: number;
+  component?: any;
 }
 
 export interface ValidatorConfig {

From fbd7aa5aa359cf6da39ba3e06b6f36ba874c6525 Mon Sep 17 00:00:00 2001
From: erdemcaygor <erdem.caygor@gmail.com>
Date: Mon, 13 Oct 2025 18:25:12 +0300
Subject: [PATCH 19/25] refactoring

---
 .../dynamic-form-field-host.component.ts      | 74 +++++++++++--------
 .../src/dynamic-form.component.html           |  4 +-
 .../src/dynamic-form.component.ts             | 31 ++------
 .../dynamic-form/src/dynamic-form.models.ts   |  7 ++
 4 files changed, 59 insertions(+), 57 deletions(-)

diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field-host.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field-host.component.ts
index 6a3209a98e..5ea3de44c4 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field-host.component.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field-host.component.ts
@@ -1,20 +1,32 @@
 import {
-  Component, Input, ViewChild, ViewContainerRef, OnChanges, SimpleChanges,
-  ChangeDetectionStrategy, forwardRef, Type, Injector, effect, DestroyRef, inject
+  Component,
+  ViewChild,
+  ViewContainerRef,
+  OnChanges,
+  SimpleChanges,
+  ChangeDetectionStrategy,
+  forwardRef,
+  Type,
+  Injector,
+  effect,
+  DestroyRef,
+  inject,
+  input,
+  ChangeDetectorRef,
 } from '@angular/core';
 import {
   ControlValueAccessor, NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule
 } from '@angular/forms';
 import { CommonModule } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
-type MaybeCVA = Partial<ControlValueAccessor> & { setDisabledState?(d: boolean): void };
-type WithFormControlInput = { formControl?: FormControl };
+type controlValueAccessorLike = Partial<ControlValueAccessor> & { setDisabledState?(d: boolean): void };
+type acceptsFormControl = { formControl?: FormControl };
 
 @Component({
   selector: 'abp-dynamic-form-field-host',
-  standalone: true,
   imports: [CommonModule, ReactiveFormsModule],
-  template: `<ng-template #vc></ng-template>`,
+  template: `<ng-template #vcRef></ng-template>`,
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [{
     provide: NG_VALUE_ACCESSOR,
@@ -23,39 +35,35 @@ type WithFormControlInput = { formControl?: FormControl };
   }]
 })
 export class DynamicFieldHostComponent implements ControlValueAccessor, OnChanges {
-  @Input({ required: true }) component!: Type<any>;
-  @Input() inputs: Record<string, any> = {}; // field, visible, vs.
+  component = input<Type<any>>();
+  inputs = input<Record<string, any>>({});
 
-  @ViewChild('vc', { read: ViewContainerRef, static: true }) vc!: ViewContainerRef;
+  @ViewChild('vcRef', { read: ViewContainerRef, static: true }) viewContainerRef!: ViewContainerRef;
+  private componentRef?: any;
 
-  private compRef?: any;
-  private onChange: (v: any) => void = () => {};
-  private onTouched: () => void = () => {};
   private lastValue: any;
   private disabled = false;
 
-  // Eğer child CVA değilse kullanmak üzere bir iç kontrol (opsiyonel)
+  // if child has not implemented ControlValueAccessor. Create form control
   private innerControl = new FormControl<any>(null);
+  readonly destroyRef = inject(DestroyRef);
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['component']) {
       this.createChild();
-    } else if (this.compRef && changes['inputs']) {
+    } else if (this.componentRef && changes['inputs']) {
       this.applyInputs();
     }
   }
 
   private createChild() {
-    this.vc.clear();
-    if (!this.component) return;
-
-    this.compRef = this.vc.createComponent(this.component);
+    this.viewContainerRef.clear();
+    if (!this.component()) return;
 
-    // inputları ata
+    this.componentRef = this.viewContainerRef.createComponent(this.component());
     this.applyInputs();
 
-    // ÇOCUK TIPINI KONTROL ET: CVA mı?
-    const instance: any = this.compRef.instance as MaybeCVA & WithFormControlInput;
+    const instance: any = this.componentRef.instance as controlValueAccessorLike & acceptsFormControl;
 
     if (this.isCVA(instance)) {
       // Child CVA ise wrapper -> child delege
@@ -76,28 +84,27 @@ export class DynamicFieldHostComponent implements ControlValueAccessor, OnChange
         if (this.lastValue !== undefined) {
           this.innerControl.setValue(this.lastValue, { emitEvent: false });
         }
-        this.innerControl.valueChanges.subscribe(v => this.onChange(v));
+        this.innerControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(v => this.onChange(v));
         this.innerControl.disabled ? null : (this.disabled && this.innerControl.disable({ emitEvent: false }));
       } else {
         // Son çare: valueChange EventEmitter’ı varsa bağla (konvansiyonel)
         if ('valueChange' in instance && instance['valueChange']?.subscribe) {
-          instance['valueChange'].subscribe((v: any) => this.onChange(v));
+          instance['valueChange'].pipe(takeUntilDestroyed(this.destroyRef)).subscribe((v: any) => this.onChange(v));
         }
       }
     }
   }
 
   private applyInputs() {
-    if (!this.compRef) return;
-    const inst = this.compRef.instance;
+    if (!this.componentRef) return;
+    const inst = this.componentRef.instance;
     for (const [k, v] of Object.entries(this.inputs ?? {})) {
       inst[k] = v;
     }
-    // change detection tetiklenebilir:
-    this.compRef.changeDetectorRef?.markForCheck?.();
+    this.componentRef.changeDetectorRef?.markForCheck?.();
   }
 
-  private isCVA(obj: any): obj is MaybeCVA {
+  private isCVA(obj: any): obj is controlValueAccessorLike {
     return obj && typeof obj.writeValue === 'function' && typeof obj.registerOnChange === 'function';
   }
 
@@ -105,9 +112,9 @@ export class DynamicFieldHostComponent implements ControlValueAccessor, OnChange
 
   writeValue(obj: any): void {
     this.lastValue = obj;
-    if (!this.compRef) return;
+    if (!this.componentRef) return;
 
-    const inst: any = this.compRef.instance as MaybeCVA & WithFormControlInput;
+    const inst: any = this.componentRef.instance as controlValueAccessorLike & acceptsFormControl;
 
     if (this.isCVA(inst)) {
       inst.writeValue?.(obj);
@@ -116,14 +123,17 @@ export class DynamicFieldHostComponent implements ControlValueAccessor, OnChange
     }
   }
 
+  private onChange: (v: any) => void = () => {};
+  private onTouched: () => void = () => {};
+
   registerOnChange(fn: any): void { this.onChange = fn; }
   registerOnTouched(fn: any): void { this.onTouched = fn; }
 
   setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;
-    if (!this.compRef) return;
+    if (!this.componentRef) return;
 
-    const inst = this.compRef.instance as MaybeCVA & WithFormControlInput;
+    const inst = this.componentRef.instance as controlValueAccessorLike & acceptsFormControl;
 
     if (this.isCVA(inst) && inst.setDisabledState) {
       inst.setDisabledState(isDisabled);
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html
index 006029afe8..9c9709bea7 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html
@@ -4,11 +4,11 @@
     @for (field of sortedFields; track field.key) {
         <div [ngClass]="'col-md-' + (field.gridSize || 12)">
           @if (field.component) {
-            <app-dynamic-field-host
+            <abp-dynamic-form-field-host
               [component]="field.component"
               [inputs]="{ field: field, visible: isFieldVisible(field) }"
               formControlName="{{ field.key }}">
-            </app-dynamic-field-host>
+            </abp-dynamic-form-field-host>
           } @else {
           <abp-dynamic-form-field
             [field]="field"
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
index 9761f492c7..2fb9a73372 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
@@ -7,19 +7,14 @@ import {
   OnInit,
   DestroyRef,
   ChangeDetectorRef,
-  effect,
-  contentChild,
-  ContentChildren,
-  QueryList,
-  AfterContentInit,
+  effect
 } from '@angular/core';
 import { FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DynamicFormService } from './dynamic-form.service';
-import { FormFieldConfig } from './dynamic-form.models';
-import { DynamicFormFieldComponent, DynamicInputDirective } from './dynamic-form-field';
-import { DynamicFieldHostComponent } from './dynamic-form-field/dynamic-form-field-host.component';
+import { ConditionalAction, FormFieldConfig } from './dynamic-form.models';
+import { DynamicFormFieldComponent, DynamicFieldHostComponent } from './dynamic-form-field';
 
 @Component({
   selector: 'abp-dynamic-form',
@@ -32,11 +27,10 @@ import { DynamicFieldHostComponent } from './dynamic-form-field/dynamic-form-fie
     CommonModule,
     DynamicFormFieldComponent,
     ReactiveFormsModule,
-    DynamicInputDirective,
     DynamicFieldHostComponent,
   ],
 })
-export class DynamicFormComponent implements OnInit, AfterContentInit {
+export class DynamicFormComponent implements OnInit {
   fields = input<FormFieldConfig[]>([]);
   values = input<Record<string, any>>();
   submitButtonText = input<string>('Submit');
@@ -47,21 +41,12 @@ export class DynamicFormComponent implements OnInit, AfterContentInit {
   private dynamicFormService = inject(DynamicFormService);
   readonly destroyRef = inject(DestroyRef);
   readonly changeDetectorRef = inject(ChangeDetectorRef);
-  @ContentChildren(DynamicInputDirective) dynamicInputs: QueryList<DynamicInputDirective>;
 
   dynamicForm!: FormGroup;
   fieldVisibility: { [key: string]: boolean } = {};
 
   ngOnInit() {
     this.setupFormAndLogic();
-
-    effect(() => {
-      console.log(this.values());
-    });
-  }
-
-  ngAfterContentInit() {
-    console.log(this.dynamicInputs.toArray());
   }
 
   get sortedFields(): FormFieldConfig[] {
@@ -159,18 +144,18 @@ export class DynamicFormComponent implements OnInit, AfterContentInit {
     const control = this.dynamicForm.get(fieldKey);
 
     switch (action) {
-      case 'show':
+      case ConditionalAction.SHOW:
         this.fieldVisibility = { ...this.fieldVisibility, [fieldKey]: shouldApply };
         break;
-      case 'hide':
+      case ConditionalAction.HIDE:
         this.fieldVisibility = { ...this.fieldVisibility, [fieldKey]: !shouldApply };
         break;
-      case 'enable':
+      case ConditionalAction.ENABLE:
         if (control) {
           shouldApply ? control.enable() : control.disable();
         }
         break;
-      case 'disable':
+      case ConditionalAction.DISABLE:
         if (control) {
           shouldApply ? control.disable() : control.enable();
         }
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.models.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.models.ts
index 7a32868957..c32163d4ac 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.models.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.models.ts
@@ -27,3 +27,10 @@ export interface ConditionalRule {
   value: any;
   action: 'show' | 'hide' | 'enable' | 'disable';
 }
+
+export enum ConditionalAction {
+  SHOW = 'show',
+  HIDE = 'hide',
+  ENABLE = 'enable',
+  DISABLE = 'disable'
+}

From 3f2f25eae993ef2e30a36c33facf002842344deb Mon Sep 17 00:00:00 2001
From: erdemcaygor <erdem.caygor@gmail.com>
Date: Tue, 14 Oct 2025 00:23:06 +0300
Subject: [PATCH 20/25] custom form field support added

---
 .../dynamic-form-field-host.component.ts      | 45 ++++++++-----------
 .../dynamic-form-field.component.html         | 10 +----
 .../dynamic-form-field.component.ts           | 20 +++++----
 .../dynamic-form/src/dynamic-form.models.ts   |  4 +-
 4 files changed, 35 insertions(+), 44 deletions(-)

diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field-host.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field-host.component.ts
index 5ea3de44c4..54600b4e7a 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field-host.component.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field-host.component.ts
@@ -2,8 +2,6 @@ import {
   Component,
   ViewChild,
   ViewContainerRef,
-  OnChanges,
-  SimpleChanges,
   ChangeDetectionStrategy,
   forwardRef,
   Type,
@@ -34,26 +32,28 @@ type acceptsFormControl = { formControl?: FormControl };
     multi: true
   }]
 })
-export class DynamicFieldHostComponent implements ControlValueAccessor, OnChanges {
-  component = input<Type<any>>();
+export class DynamicFieldHostComponent implements ControlValueAccessor {
+  component = input<Type<ControlValueAccessor>>();
   inputs = input<Record<string, any>>({});
 
   @ViewChild('vcRef', { read: ViewContainerRef, static: true }) viewContainerRef!: ViewContainerRef;
   private componentRef?: any;
 
-  private lastValue: any;
+  private value: any;
   private disabled = false;
 
   // if child has not implemented ControlValueAccessor. Create form control
   private innerControl = new FormControl<any>(null);
   readonly destroyRef = inject(DestroyRef);
 
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['component']) {
-      this.createChild();
-    } else if (this.componentRef && changes['inputs']) {
-      this.applyInputs();
-    }
+  constructor() {
+    effect(() => {
+      if (this.component()) {
+        this.createChild();
+      } else if (this.componentRef && this.inputs()) {
+        this.applyInputs();
+      }
+    });
   }
 
   private createChild() {
@@ -72,25 +72,20 @@ export class DynamicFieldHostComponent implements ControlValueAccessor, OnChange
       if (this.disabled && instance.setDisabledState) {
         instance.setDisabledState(true);
       }
-      // İlk değeri ilet
-      if (this.lastValue !== undefined) {
-        instance.writeValue?.(this.lastValue);
+      // set initial value
+      if (this.value !== undefined) {
+        instance.writeValue?.(this.value);
       }
     } else {
-      // Child CVA değilse, formControl input’u varsa köprüle
+      // No CVA -> use form control
       if ('formControl' in instance) {
         instance.formControl = this.innerControl;
-        // son değeri uygula
-        if (this.lastValue !== undefined) {
-          this.innerControl.setValue(this.lastValue, { emitEvent: false });
+        // apply initial value/disabled state
+        if (this.value !== undefined) {
+          this.innerControl.setValue(this.value, { emitEvent: false });
         }
         this.innerControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(v => this.onChange(v));
         this.innerControl.disabled ? null : (this.disabled && this.innerControl.disable({ emitEvent: false }));
-      } else {
-        // Son çare: valueChange EventEmitter’ı varsa bağla (konvansiyonel)
-        if ('valueChange' in instance && instance['valueChange']?.subscribe) {
-          instance['valueChange'].pipe(takeUntilDestroyed(this.destroyRef)).subscribe((v: any) => this.onChange(v));
-        }
       }
     }
   }
@@ -108,10 +103,8 @@ export class DynamicFieldHostComponent implements ControlValueAccessor, OnChange
     return obj && typeof obj.writeValue === 'function' && typeof obj.registerOnChange === 'function';
   }
 
-  /* --------- CVA (wrapper) --------- */
-
   writeValue(obj: any): void {
-    this.lastValue = obj;
+    this.value = obj;
     if (!this.componentRef) return;
 
     const inst: any = this.componentRef.instance as controlValueAccessorLike & acceptsFormControl;
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
index b2b95a5e3c..8bd9ad1fbf 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
@@ -38,15 +38,7 @@
     } @else if (field().type === 'checkbox') {
       <!-- Checkbox -->
       <div class="form-group form-check">
-        <input
-          type="checkbox"
-          [id]="field().key"
-          formControlName="value"
-          [class.is-invalid]="isInvalid"
-          class="form-check-input">
-        <label class="form-check-label" [for]="field().key">
-          {{ field().label | abpLocalization }}
-        </label>
+        <abp-checkbox [label]="field().label" formControlName="value" [id]="field().key" />
         @if (isInvalid) {
           <ng-container [ngTemplateOutlet]="errorTemplate"/>
         }
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
index fce9058680..f7bd449352 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
@@ -16,7 +16,6 @@ import {
   FormControl,
   FormControlName,
   FormGroupDirective,
-  FormsModule,
   NG_VALUE_ACCESSOR,
   NgControl,
   FormGroup,
@@ -25,6 +24,7 @@ import {
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgTemplateOutlet } from '@angular/common';
 import { LocalizationPipe } from '@abp/ng.core';
+import { FormCheckboxComponent } from '@abp/ng.theme.shared';
 
 export const ABP_DYNAMIC_FORM_FIELD = new InjectionToken<DynamicFormFieldComponent>('AbpDynamicFormField');
 
@@ -40,12 +40,12 @@ const DYNAMIC_FORM_FIELD_CONTROL_VALUE_ACCESSOR = {
   styleUrls: ['./dynamic-form-field.component.scss'],
   providers: [
     { provide: ABP_DYNAMIC_FORM_FIELD, useExisting: DynamicFormFieldComponent },
-    DYNAMIC_FORM_FIELD_CONTROL_VALUE_ACCESSOR
+    DYNAMIC_FORM_FIELD_CONTROL_VALUE_ACCESSOR,
   ],
   host: { class: 'abp-dynamic-form-field' },
   exportAs: 'abpDynamicFormField',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgTemplateOutlet, LocalizationPipe, ReactiveFormsModule],
+  imports: [NgTemplateOutlet, LocalizationPipe, ReactiveFormsModule, FormCheckboxComponent],
 })
 export class DynamicFormFieldComponent implements OnInit, ControlValueAccessor {
   field = input.required<FormFieldConfig>();
@@ -59,7 +59,7 @@ export class DynamicFormFieldComponent implements OnInit, ControlValueAccessor {
 
   constructor() {
     this.fieldFormGroup = this.formBuilder.group({
-      value: [{ value: '' }]
+      value: [{ value: '' }],
     });
   }
 
@@ -97,7 +97,7 @@ export class DynamicFormFieldComponent implements OnInit, ControlValueAccessor {
 
   get isInvalid(): boolean {
     if (this.control) {
-      return (this.control.invalid && (this.control.dirty || this.control.touched));
+      return this.control.invalid && (this.control.dirty || this.control.touched);
     }
     return false;
   }
@@ -106,7 +106,9 @@ export class DynamicFormFieldComponent implements OnInit, ControlValueAccessor {
     if (this.control && this.control.errors) {
       const errorKeys = Object.keys(this.control.errors);
       return errorKeys.map(key => {
-        const validator = this.field().validators.find(v => v.type.toLowerCase() === key.toLowerCase());
+        const validator = this.field().validators.find(
+          v => v.type.toLowerCase() === key.toLowerCase(),
+        );
         console.log(this.field().validators, key);
         if (validator && validator.message) {
           return validator.message;
@@ -114,8 +116,10 @@ export class DynamicFormFieldComponent implements OnInit, ControlValueAccessor {
         // Fallback error messages
         if (key === 'required') return `${this.field().label} is required`;
         if (key === 'email') return 'Please enter a valid email address';
-        if (key === 'minlength') return `Minimum length is ${this.control.errors[key].requiredLength}`;
-        if (key === 'maxlength') return `Maximum length is ${this.control.errors[key].requiredLength}`;
+        if (key === 'minlength')
+          return `Minimum length is ${this.control.errors[key].requiredLength}`;
+        if (key === 'maxlength')
+          return `Maximum length is ${this.control.errors[key].requiredLength}`;
         return `${this.field().label} is invalid due to ${key} validation.`;
       });
     }
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.models.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.models.ts
index c32163d4ac..716c252d7b 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.models.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.models.ts
@@ -1,3 +1,5 @@
+import { Type } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
 
 export interface FormFieldConfig {
   key: string;
@@ -12,7 +14,7 @@ export interface FormFieldConfig {
   conditionalLogic?: ConditionalRule[];
   order?: number;
   gridSize?: number;
-  component?: any;
+  component?: Type<ControlValueAccessor>;
 }
 
 export interface ValidatorConfig {

From 990f9890fadf1c4a943961acdf59c0b1a58a6c4e Mon Sep 17 00:00:00 2001
From: erdemcaygor <erdem.caygor@gmail.com>
Date: Tue, 2 Dec 2025 23:38:05 +0300
Subject: [PATCH 21/25] example

---
 .../apps/dev-app/src/app/home/custom-input.ts | 124 ++++++++++++++++++
 .../dev-app/src/app/home/home.component.html  |   3 +
 .../dev-app/src/app/home/home.component.ts    |  47 ++++---
 .../angular/src/app/home/home.component.html  |   1 +
 .../angular/src/app/home/home.component.ts    |  75 ++++++++++-
 5 files changed, 231 insertions(+), 19 deletions(-)
 create mode 100644 npm/ng-packs/apps/dev-app/src/app/home/custom-input.ts

diff --git a/npm/ng-packs/apps/dev-app/src/app/home/custom-input.ts b/npm/ng-packs/apps/dev-app/src/app/home/custom-input.ts
new file mode 100644
index 0000000000..9d1aeeab26
--- /dev/null
+++ b/npm/ng-packs/apps/dev-app/src/app/home/custom-input.ts
@@ -0,0 +1,124 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  DestroyRef,
+  forwardRef,
+  inject,
+  Injector,
+  input,
+  OnInit,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  FormBuilder,
+  FormControl,
+  FormControlName,
+  FormGroupDirective,
+  NG_VALUE_ACCESSOR,
+  NgControl,
+  FormGroup,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormFieldConfig } from '@abp/ng.components/dynamic-form';
+
+
+const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => AppCustomInputComponent),
+  multi: true,
+};
+
+@Component({
+  selector: 'abp-dynamic-form-field',
+  template: `
+    <div [formGroup]="fieldFormGroup">
+      <input type="text" label="text label" formControlName="value" />
+    </div>
+  `,
+  providers: [
+    CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ReactiveFormsModule],
+})
+export class AppCustomInputComponent implements OnInit, ControlValueAccessor {
+  field = input.required<FormFieldConfig>();
+  visible = input<boolean>(true);
+  control!: FormControl;
+  fieldFormGroup: FormGroup;
+  readonly changeDetectorRef = inject(ChangeDetectorRef);
+  readonly destroyRef = inject(DestroyRef);
+  private injector = inject(Injector);
+  private formBuilder = inject(FormBuilder);
+
+  constructor() {
+    this.fieldFormGroup = this.formBuilder.group({
+      value: [{ value: '' }]
+    });
+  }
+
+  ngOnInit() {
+    const ngControl = this.injector.get(NgControl, null);
+    if (ngControl) {
+      this.control = this.injector.get(FormGroupDirective).getControl(ngControl as FormControlName);
+    }
+    this.value.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
+      this.onChange(value);
+    });
+  }
+
+  writeValue(value: any[]): void {
+    this.value.setValue(value || '');
+    this.changeDetectorRef.markForCheck();
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    if (isDisabled) {
+      this.value.disable();
+    } else {
+      this.value.enable();
+    }
+    this.changeDetectorRef.markForCheck();
+  }
+
+  get isInvalid(): boolean {
+    if (this.control) {
+      return (this.control.invalid && (this.control.dirty || this.control.touched));
+    }
+    return false;
+  }
+
+  get errors(): string[] {
+    if (this.control && this.control.errors) {
+      const errorKeys = Object.keys(this.control.errors);
+      return errorKeys.map(key => {
+        const validator = this.field().validators.find(v => v.type.toLowerCase() === key.toLowerCase());
+        console.log(this.field().validators, key);
+        if (validator && validator.message) {
+          return validator.message;
+        }
+        // Fallback error messages
+        if (key === 'required') return `${this.field().label} is required`;
+        if (key === 'email') return 'Please enter a valid email address';
+        if (key === 'minlength') return `Minimum length is ${this.control.errors[key].requiredLength}`;
+        if (key === 'maxlength') return `Maximum length is ${this.control.errors[key].requiredLength}`;
+        return `${this.field().label} is invalid due to ${key} validation.`;
+      });
+    }
+  }
+  get value() {
+    return this.fieldFormGroup.get('value');
+  }
+  private onChange: (value: any) => void = () => {};
+  private onTouched: () => void = () => {};
+}
diff --git a/npm/ng-packs/apps/dev-app/src/app/home/home.component.html b/npm/ng-packs/apps/dev-app/src/app/home/home.component.html
index 466c08d824..29df7d4cc2 100644
--- a/npm/ng-packs/apps/dev-app/src/app/home/home.component.html
+++ b/npm/ng-packs/apps/dev-app/src/app/home/home.component.html
@@ -1,5 +1,8 @@
 <div class="container">
   <abp-dynamic-form [fields]="formFields" (onSubmit)="submit($event)">
+    <ng-template #customInput>
+      <custom-input></custom-input>
+    </ng-template>
   </abp-dynamic-form>
   <div class="p-5 text-center">
     <div class="d-inline-block bg-success text-white p-1 h5 rounded mb-4" role="alert">
diff --git a/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts b/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts
index 6afd17a90c..f71e1a9c26 100644
--- a/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts
+++ b/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts
@@ -3,11 +3,19 @@ import { Component, inject, ViewChild } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { ButtonComponent, CardBodyComponent, CardComponent } from '@abp/ng.theme.shared';
 import { DynamicFormComponent, FormFieldConfig } from '@abp/ng.components/dynamic-form';
+import { AppCustomInputComponent } from './custom-input';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
-  imports: [NgTemplateOutlet, LocalizationPipe, CardComponent, CardBodyComponent, ButtonComponent, DynamicFormComponent],
+  imports: [
+    NgTemplateOutlet,
+    LocalizationPipe,
+    CardComponent,
+    CardBodyComponent,
+    ButtonComponent,
+    DynamicFormComponent,
+  ],
 })
 export class HomeComponent {
   @ViewChild(DynamicFormComponent, { static: true }) dynamicFormComponent: DynamicFormComponent;
@@ -22,10 +30,11 @@ export class HomeComponent {
       required: true,
       validators: [
         { type: 'required', message: 'First name is required' },
-        { type: 'minLength', value: 2, message: 'Minimum 2 characters required' }
+        { type: 'minLength', value: 2, message: 'Minimum 2 characters required' },
       ],
       gridSize: 6,
-      order: 1
+      order: 1,
+      component: AppCustomInputComponent
     },
     {
       key: 'lastName',
@@ -33,11 +42,9 @@ export class HomeComponent {
       label: 'Last Name',
       placeholder: 'Enter last name',
       required: true,
-      validators: [
-        { type: 'required', message: 'Last name is required' }
-      ],
+      validators: [{ type: 'required', message: 'Last name is required' }],
       gridSize: 12,
-      order: 3
+      order: 3,
     },
     {
       key: 'email',
@@ -47,10 +54,10 @@ export class HomeComponent {
       required: true,
       validators: [
         { type: 'required', message: 'Email is required' },
-        { type: 'email', message: 'Please enter a valid email' }
+        { type: 'email', message: 'Please enter a valid email' },
       ],
       gridSize: 6,
-      order: 2
+      order: 2,
     },
     {
       key: 'userType',
@@ -60,12 +67,10 @@ export class HomeComponent {
       options: [
         { key: 'admin', value: 'Administrator' },
         { key: 'user', value: 'Regular User' },
-        { key: 'guest', value: 'Guest User' }
-      ],
-      validators: [
-        { type: 'required', message: 'Please select user type' }
+        { key: 'guest', value: 'Guest User' },
       ],
-      order: 4
+      validators: [{ type: 'required', message: 'Please select user type' }],
+      order: 4,
     },
     {
       key: 'adminNotes',
@@ -77,11 +82,17 @@ export class HomeComponent {
           dependsOn: 'userType',
           condition: 'equals',
           value: 'admin',
-          action: 'show'
-        }
+          action: 'show',
+        },
       ],
-      order: 5
-    }
+      order: 5,
+    },
+    {
+      key: 'isSelected',
+      type: 'checkbox',
+      label: 'Is Selected',
+      order: 6,
+    },
   ];
   loading = false;
 
diff --git a/templates/app/angular/src/app/home/home.component.html b/templates/app/angular/src/app/home/home.component.html
index e3e73e48ae..edcdc66bc0 100644
--- a/templates/app/angular/src/app/home/home.component.html
+++ b/templates/app/angular/src/app/home/home.component.html
@@ -1,4 +1,5 @@
 <div class="row mb-3">
+  <abp-dynamic-form [fields]="formFields" />
   <div class="col-xl-6 col-12 d-flex">
     <div class="card h-lg-100 w-100 overflow-hidden">
       <div class="card-body">
diff --git a/templates/app/angular/src/app/home/home.component.ts b/templates/app/angular/src/app/home/home.component.ts
index 420edd4724..ee6bd838c9 100644
--- a/templates/app/angular/src/app/home/home.component.ts
+++ b/templates/app/angular/src/app/home/home.component.ts
@@ -1,16 +1,89 @@
 import {AuthService, LocalizationPipe} from '@abp/ng.core';
 import { Component, inject } from '@angular/core';
 import {NgTemplateOutlet} from "@angular/common";
+import {DynamicFormComponent, FormFieldConfig} from "@abp/ng.components/dynamic-form";
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],
-  imports: [NgTemplateOutlet, LocalizationPipe]
+  imports: [NgTemplateOutlet, LocalizationPipe, DynamicFormComponent]
 })
 export class HomeComponent {
   private authService = inject(AuthService);
 
+  formFields: FormFieldConfig[] = [
+    {
+      key: 'firstName',
+      type: 'text',
+      label: 'First Name',
+      placeholder: 'Enter first name',
+      value: 'erdemc',
+      required: true,
+      validators: [
+        { type: 'required', message: 'First name is required' },
+        { type: 'minLength', value: 2, message: 'Minimum 2 characters required' }
+      ],
+      gridSize: 6,
+      order: 1
+    },
+    {
+      key: 'lastName',
+      type: 'text',
+      label: 'Last Name',
+      placeholder: 'Enter last name',
+      required: true,
+      validators: [
+        { type: 'required', message: 'Last name is required' }
+      ],
+      gridSize: 12,
+      order: 3
+    },
+    {
+      key: 'email',
+      type: 'email',
+      label: 'Email Address',
+      placeholder: 'Enter email',
+      required: true,
+      validators: [
+        { type: 'required', message: 'Email is required' },
+        { type: 'email', message: 'Please enter a valid email' }
+      ],
+      gridSize: 6,
+      order: 2
+    },
+    {
+      key: 'userType',
+      type: 'select',
+      label: 'User Type',
+      required: true,
+      options: [
+        { key: 'admin', value: 'Administrator' },
+        { key: 'user', value: 'Regular User' },
+        { key: 'guest', value: 'Guest User' }
+      ],
+      validators: [
+        { type: 'required', message: 'Please select user type' }
+      ],
+      order: 4
+    },
+    {
+      key: 'adminNotes',
+      type: 'textarea',
+      label: 'Admin Notes',
+      placeholder: 'Enter admin-specific notes',
+      conditionalLogic: [
+        {
+          dependsOn: 'userType',
+          condition: 'equals',
+          value: 'admin',
+          action: 'show'
+        }
+      ],
+      order: 5
+    }
+  ];
+
   get hasLoggedIn(): boolean {
     return this.authService.isAuthenticated;
   }

From da26bfc29bbe18389241e6f5c6d3acfb88944ec8 Mon Sep 17 00:00:00 2001
From: erdemcaygor <erdem.caygor@gmail.com>
Date: Wed, 3 Dec 2025 00:37:17 +0300
Subject: [PATCH 22/25] example

---
 .../apps/dev-app/src/app/app.routes.ts        |   4 +
 .../dynamic-form-page.component.html          |   6 +
 .../dynamic-form-page.component.ts            |  27 ++++
 .../dynamic-form-page/form-config.service.ts  |  15 ++
 .../dev-app/src/app/home/home.component.html  | 144 ++++++------------
 .../dev-app/src/app/home/home.component.ts    |  87 +----------
 .../apps/dev-app/src/assets/form-config.json  |  73 +++++++++
 7 files changed, 177 insertions(+), 179 deletions(-)
 create mode 100644 npm/ng-packs/apps/dev-app/src/app/dynamic-form-page/dynamic-form-page.component.html
 create mode 100644 npm/ng-packs/apps/dev-app/src/app/dynamic-form-page/dynamic-form-page.component.ts
 create mode 100644 npm/ng-packs/apps/dev-app/src/app/dynamic-form-page/form-config.service.ts
 create mode 100644 npm/ng-packs/apps/dev-app/src/assets/form-config.json

diff --git a/npm/ng-packs/apps/dev-app/src/app/app.routes.ts b/npm/ng-packs/apps/dev-app/src/app/app.routes.ts
index 47462b7f8f..c520328975 100644
--- a/npm/ng-packs/apps/dev-app/src/app/app.routes.ts
+++ b/npm/ng-packs/apps/dev-app/src/app/app.routes.ts
@@ -6,6 +6,10 @@ export const appRoutes: Routes = [
     pathMatch: 'full',
     loadComponent: () => import('./home/home.component').then(m => m.HomeComponent),
   },
+  {
+    path: 'dynamic-form',
+    loadComponent: () => import('./dynamic-form-page/dynamic-form-page.component').then(m => m.DynamicFormPageComponent),
+  },
   {
     path: 'account',
     loadChildren: () => import('@abp/ng.account').then(m => m.createRoutes()),
diff --git a/npm/ng-packs/apps/dev-app/src/app/dynamic-form-page/dynamic-form-page.component.html b/npm/ng-packs/apps/dev-app/src/app/dynamic-form-page/dynamic-form-page.component.html
new file mode 100644
index 0000000000..b938978534
--- /dev/null
+++ b/npm/ng-packs/apps/dev-app/src/app/dynamic-form-page/dynamic-form-page.component.html
@@ -0,0 +1,6 @@
+<div class="container mt-4">
+    <h2>Dynamic Form Page</h2>
+    @if (formFields.length) {
+    <abp-dynamic-form [fields]="formFields" (onSubmit)="submit($event)" />
+    }
+</div>
\ No newline at end of file
diff --git a/npm/ng-packs/apps/dev-app/src/app/dynamic-form-page/dynamic-form-page.component.ts b/npm/ng-packs/apps/dev-app/src/app/dynamic-form-page/dynamic-form-page.component.ts
new file mode 100644
index 0000000000..1b9f1bb764
--- /dev/null
+++ b/npm/ng-packs/apps/dev-app/src/app/dynamic-form-page/dynamic-form-page.component.ts
@@ -0,0 +1,27 @@
+import { Component, inject, OnInit, ViewChild } from '@angular/core';
+import { DynamicFormComponent, FormFieldConfig } from '@abp/ng.components/dynamic-form';
+import { FormConfigService } from './form-config.service';
+
+@Component({
+    selector: 'app-dynamic-form-page',
+    templateUrl: './dynamic-form-page.component.html',
+    standalone: true,
+    imports: [DynamicFormComponent],
+})
+export class DynamicFormPageComponent implements OnInit {
+    @ViewChild(DynamicFormComponent, { static: false }) dynamicFormComponent: DynamicFormComponent;
+    protected readonly formConfigService = inject(FormConfigService);
+
+    formFields: FormFieldConfig[] = [];
+
+    ngOnInit() {
+        this.formConfigService.getFormConfig().subscribe(config => {
+            this.formFields = config;
+        });
+    }
+
+    submit(val) {
+        console.log('submit', val);
+        this.dynamicFormComponent.resetForm();
+    }
+}
diff --git a/npm/ng-packs/apps/dev-app/src/app/dynamic-form-page/form-config.service.ts b/npm/ng-packs/apps/dev-app/src/app/dynamic-form-page/form-config.service.ts
new file mode 100644
index 0000000000..0c5c86c841
--- /dev/null
+++ b/npm/ng-packs/apps/dev-app/src/app/dynamic-form-page/form-config.service.ts
@@ -0,0 +1,15 @@
+import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { FormFieldConfig } from '@abp/ng.components/dynamic-form';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class FormConfigService {
+    protected readonly http = inject(HttpClient);
+
+    getFormConfig(): Observable<FormFieldConfig[]> {
+        return this.http.get<FormFieldConfig[]>('/assets/form-config.json');
+    }
+}
diff --git a/npm/ng-packs/apps/dev-app/src/app/home/home.component.html b/npm/ng-packs/apps/dev-app/src/app/home/home.component.html
index 29df7d4cc2..d83f2be7f1 100644
--- a/npm/ng-packs/apps/dev-app/src/app/home/home.component.html
+++ b/npm/ng-packs/apps/dev-app/src/app/home/home.component.html
@@ -1,9 +1,7 @@
 <div class="container">
-  <abp-dynamic-form [fields]="formFields" (onSubmit)="submit($event)">
-    <ng-template #customInput>
-      <custom-input></custom-input>
-    </ng-template>
-  </abp-dynamic-form>
+  <div class="text-center mb-4">
+    <a routerLink="/dynamic-form" class="btn btn-primary">Go to Dynamic Form</a>
+  </div>
   <div class="p-5 text-center">
     <div class="d-inline-block bg-success text-white p-1 h5 rounded mb-4" role="alert">
       <h5 class="m-1">
@@ -17,16 +15,10 @@ <h1>{{ '::Welcome' | abpLocalization }}</h1>
     <p class="lead px-lg-5 mx-lg-5">{{ '::LongWelcomeMessage' | abpLocalization }}</p>
 
     @if (!hasLoggedIn) {
-      <abp-button
-        [loading]="loading"
-        (click)="login()"
-        [disabled]="loading"
-        class="px-4 ml-1"
-        role="button"
-        iconClass="fa fa-sign-in"
-      >
-        {{ 'AbpAccount::Login' | abpLocalization }}
-      </abp-button>
+    <abp-button [loading]="loading" (click)="login()" [disabled]="loading" class="px-4 ml-1" role="button"
+      iconClass="fa fa-sign-in">
+      {{ 'AbpAccount::Login' | abpLocalization }}
+    </abp-button>
     }
   </div>
   <div class="my-3 text-center">
@@ -36,8 +28,7 @@ <h3>Let's improve your application!</h3>
   <abp-card cardClass="mt-4 mb-5">
     <abp-card-body>
       <div class="row text-center justify-content-md-center">
-        <ng-container
-          *ngTemplateOutlet="
+        <ng-container *ngTemplateOutlet="
             starterLinkTemplate;
             context: {
               $implicit: {
@@ -52,11 +43,9 @@ <h3>Let's improve your application!</h3>
                 ]
               }
             }
-          "
-        ></ng-container>
+          "></ng-container>
 
-        <ng-container
-          *ngTemplateOutlet="
+        <ng-container *ngTemplateOutlet="
             starterLinkTemplate;
             context: {
               $implicit: {
@@ -70,11 +59,9 @@ <h3>Let's improve your application!</h3>
                 ]
               }
             }
-          "
-        ></ng-container>
+          "></ng-container>
 
-        <ng-container
-          *ngTemplateOutlet="
+        <ng-container *ngTemplateOutlet="
             starterLinkTemplate;
             context: {
               $implicit: {
@@ -92,12 +79,10 @@ <h3>Let's improve your application!</h3>
                 ]
               }
             }
-          "
-        ></ng-container>
+          "></ng-container>
       </div>
       <div class="row text-center mt-lg-3 justify-content-md-center">
-        <ng-container
-          *ngTemplateOutlet="
+        <ng-container *ngTemplateOutlet="
             starterLinkTemplate;
             context: {
               $implicit: {
@@ -111,13 +96,11 @@ <h3>Let's improve your application!</h3>
                 ]
               }
             }
-          "
-        ></ng-container>
+          "></ng-container>
 
         <ng-template #githubButtonsTemplate>
           <p class="mb-1">
-            <iframe
-              scrolling="no"
+            <iframe scrolling="no"
               src="https://buttons.github.io/buttons.html#href=https%3A%2F%2Fgithub.com%2Fabpframework%2Fabp&amp;title=&amp;aria-label=Star%20tabalinas%2Fjsgrid%20on%20GitHub&amp;data-icon=octicon-star&amp;data-text=Star&amp;data-size=large&amp;data-show-count=true"
               style="
                 width: 122px;
@@ -125,10 +108,8 @@ <h3>Let's improve your application!</h3>
                 border: none;
                 display: inline-block;
                 margin-right: 4px;
-              "
-            ></iframe>
-            <iframe
-              scrolling="no"
+              "></iframe>
+            <iframe scrolling="no"
               src="https://buttons.github.io/buttons.html#href=https%3A%2F%2Fgithub.com%2Fabpframework%2Fabp%2Fissues&amp;title=&amp;aria-label=Issue%20tabalinas%2Fjsgrid%20on%20GitHub&amp;data-icon=octicon-issue-opened&amp;data-text=Issue&amp;data-size=large"
               style="
                 width: 72px;
@@ -136,19 +117,15 @@ <h3>Let's improve your application!</h3>
                 border: none;
                 display: inline-block;
                 margin-right: 4px;
-              "
-            ></iframe>
+              "></iframe>
 
-            <iframe
-              scrolling="no"
+            <iframe scrolling="no"
               src="https://buttons.github.io/buttons.html#href=https%3A%2F%2Fgithub.com%2Fabpframework%2Fabp%2Ffork&amp;title=&amp;aria-label=Fork%20tabalinas%2Fjsgrid%20on%20GitHub&amp;data-icon=octicon-repo-forked&amp;data-text=Fork&amp;data-size=large&amp;"
-              style="width: 72px; height: 28px; border: none; display: inline-block"
-            ></iframe>
+              style="width: 72px; height: 28px; border: none; display: inline-block"></iframe>
           </p>
         </ng-template>
 
-        <ng-container
-          *ngTemplateOutlet="
+        <ng-container *ngTemplateOutlet="
             starterLinkTemplate;
             context: {
               $implicit: {
@@ -164,11 +141,9 @@ <h3>Let's improve your application!</h3>
                 customTemplate: githubButtonsTemplate
               }
             }
-          "
-        ></ng-container>
+          "></ng-container>
 
-        <ng-container
-          *ngTemplateOutlet="
+        <ng-container *ngTemplateOutlet="
             starterLinkTemplate;
             context: {
               $implicit: {
@@ -186,8 +161,7 @@ <h3>Let's improve your application!</h3>
                 ]
               }
             }
-          "
-        ></ng-container>
+          "></ng-container>
       </div>
     </abp-card-body>
   </abp-card>
@@ -205,8 +179,7 @@ <h3>Meet the ABP</h3>
       </p>
 
       <div class="row text-center justify-content-md-center">
-        <ng-container
-          *ngTemplateOutlet="
+        <ng-container *ngTemplateOutlet="
             featuresTemplate;
             context: {
               $implicit: {
@@ -214,11 +187,9 @@ <h3>Meet the ABP</h3>
                 href: 'https://abp.io/startup-templates?ref=tmpl'
               }
             }
-          "
-        ></ng-container>
+          "></ng-container>
 
-        <ng-container
-          *ngTemplateOutlet="
+        <ng-container *ngTemplateOutlet="
             featuresTemplate;
             context: {
               $implicit: {
@@ -226,11 +197,9 @@ <h3>Meet the ABP</h3>
                 href: 'https://abp.io/modules?ref=tmpl'
               }
             }
-          "
-        ></ng-container>
+          "></ng-container>
 
-        <ng-container
-          *ngTemplateOutlet="
+        <ng-container *ngTemplateOutlet="
             featuresTemplate;
             context: {
               $implicit: {
@@ -238,11 +207,9 @@ <h3>Meet the ABP</h3>
                 href: 'https://abp.io/tools?ref=tmpl'
               }
             }
-          "
-        ></ng-container>
+          "></ng-container>
 
-        <ng-container
-          *ngTemplateOutlet="
+        <ng-container *ngTemplateOutlet="
             featuresTemplate;
             context: {
               $implicit: {
@@ -250,11 +217,9 @@ <h3>Meet the ABP</h3>
                 href: 'https://abp.io/themes?ref=tmpl'
               }
             }
-          "
-        ></ng-container>
+          "></ng-container>
 
-        <ng-container
-          *ngTemplateOutlet="
+        <ng-container *ngTemplateOutlet="
             featuresTemplate;
             context: {
               $implicit: {
@@ -262,11 +227,9 @@ <h3>Meet the ABP</h3>
                 href: 'https://abp.io/support/questions?ref=tmpl'
               }
             }
-          "
-        ></ng-container>
+          "></ng-container>
 
-        <ng-container
-          *ngTemplateOutlet="
+        <ng-container *ngTemplateOutlet="
             featuresTemplate;
             context: {
               $implicit: {
@@ -274,26 +237,19 @@ <h3>Meet the ABP</h3>
                 href: 'https://abp.io/services'
               }
             }
-          "
-        ></ng-container>
+          "></ng-container>
       </div>
     </abp-card-body>
   </abp-card>
 
   <div class="mb-5 text-center">
     <p class="align-middle">
-      <a href="https://twitter.com/abpframework" target="_blank" class="mx-2"
-        ><i class="fa fa-twitter" aria-hidden="true"></i
-        ><span class="text-secondary"> Abp Framework</span></a
-      >
-      <a href="https://twitter.com/abpcommercial" target="_blank" class="mx-2"
-        ><i class="fa fa-twitter" aria-hidden="true"></i
-        ><span class="text-secondary"> Abp </span></a
-      >
-      <a href="https://github.com/abpframework/abp" target="_blank" class="mx-2"
-        ><i class="fa fa-github" aria-hidden="true"></i
-        ><span class="text-secondary"> abpframework</span></a
-      >
+      <a href="https://twitter.com/abpframework" target="_blank" class="mx-2"><i class="fa fa-twitter"
+          aria-hidden="true"></i><span class="text-secondary"> Abp Framework</span></a>
+      <a href="https://twitter.com/abpcommercial" target="_blank" class="mx-2"><i class="fa fa-twitter"
+          aria-hidden="true"></i><span class="text-secondary"> Abp </span></a>
+      <a href="https://github.com/abpframework/abp" target="_blank" class="mx-2"><i class="fa fa-github"
+          aria-hidden="true"></i><span class="text-secondary"> abpframework</span></a>
     </p>
   </div>
 </div>
@@ -307,12 +263,11 @@ <h5 class="mb-3">
       </h5>
       <p [innerHTML]="context.description"></p>
       @if (context.customTemplate) {
-        <ng-container [ngTemplateOutlet]="context.customTemplate"></ng-container>
+      <ng-container [ngTemplateOutlet]="context.customTemplate"></ng-container>
       }
       @for (link of context.links; track $index) {
-        <a [href]="link.href" target="_blank" class="btn btn-link px-1"
-          >{{ link.label }} <i class="fas fa-chevron-right" aria-hidden="true"></i
-        ></a>
+      <a [href]="link.href" target="_blank" class="btn btn-link px-1">{{ link.label }} <i class="fas fa-chevron-right"
+          aria-hidden="true"></i></a>
       }
     </div>
   </div>
@@ -324,9 +279,8 @@ <h5 class="mb-3">
       <h6>
         <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary" aria-hidden="true"></i>
         <span [innerHTML]="context.title"></span>
-        <a [href]="context.href" target="_blank" class="d-block mt-2 btn btn-sm btn-link"
-          >Details <i class="fas fa-chevron-right" aria-hidden="true"></i
-        ></a>
+        <a [href]="context.href" target="_blank" class="d-block mt-2 btn btn-sm btn-link">Details <i
+            class="fas fa-chevron-right" aria-hidden="true"></i></a>
       </h6>
     </div>
   </div>
@@ -346,4 +300,4 @@ <h6>
       border-left: 0 !important;
     }
   }
-</style>
+</style>
\ No newline at end of file
diff --git a/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts b/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts
index f71e1a9c26..aa25b046d7 100644
--- a/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts
+++ b/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts
@@ -1,9 +1,8 @@
 import { AuthService, LocalizationPipe } from '@abp/ng.core';
-import { Component, inject, ViewChild } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { ButtonComponent, CardBodyComponent, CardComponent } from '@abp/ng.theme.shared';
-import { DynamicFormComponent, FormFieldConfig } from '@abp/ng.components/dynamic-form';
-import { AppCustomInputComponent } from './custom-input';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-home',
@@ -14,97 +13,17 @@ import { AppCustomInputComponent } from './custom-input';
     CardComponent,
     CardBodyComponent,
     ButtonComponent,
-    DynamicFormComponent,
+    RouterLink
   ],
 })
 export class HomeComponent {
-  @ViewChild(DynamicFormComponent, { static: true }) dynamicFormComponent: DynamicFormComponent;
   protected readonly authService = inject(AuthService);
-  formFields: FormFieldConfig[] = [
-    {
-      key: 'firstName',
-      type: 'text',
-      label: 'First Name',
-      placeholder: 'Enter first name',
-      value: 'erdemc',
-      required: true,
-      validators: [
-        { type: 'required', message: 'First name is required' },
-        { type: 'minLength', value: 2, message: 'Minimum 2 characters required' },
-      ],
-      gridSize: 6,
-      order: 1,
-      component: AppCustomInputComponent
-    },
-    {
-      key: 'lastName',
-      type: 'text',
-      label: 'Last Name',
-      placeholder: 'Enter last name',
-      required: true,
-      validators: [{ type: 'required', message: 'Last name is required' }],
-      gridSize: 12,
-      order: 3,
-    },
-    {
-      key: 'email',
-      type: 'email',
-      label: 'Email Address',
-      placeholder: 'Enter email',
-      required: true,
-      validators: [
-        { type: 'required', message: 'Email is required' },
-        { type: 'email', message: 'Please enter a valid email' },
-      ],
-      gridSize: 6,
-      order: 2,
-    },
-    {
-      key: 'userType',
-      type: 'select',
-      label: 'User Type',
-      required: true,
-      options: [
-        { key: 'admin', value: 'Administrator' },
-        { key: 'user', value: 'Regular User' },
-        { key: 'guest', value: 'Guest User' },
-      ],
-      validators: [{ type: 'required', message: 'Please select user type' }],
-      order: 4,
-    },
-    {
-      key: 'adminNotes',
-      type: 'textarea',
-      label: 'Admin Notes',
-      placeholder: 'Enter admin-specific notes',
-      conditionalLogic: [
-        {
-          dependsOn: 'userType',
-          condition: 'equals',
-          value: 'admin',
-          action: 'show',
-        },
-      ],
-      order: 5,
-    },
-    {
-      key: 'isSelected',
-      type: 'checkbox',
-      label: 'Is Selected',
-      order: 6,
-    },
-  ];
   loading = false;
 
   get hasLoggedIn(): boolean {
     return this.authService.isAuthenticated;
   }
 
-  submit(val) {
-    console.log('submit', val);
-    this.dynamicFormComponent.resetForm();
-  }
-
   login() {
     this.loading = true;
     this.authService.navigateToLogin();
diff --git a/npm/ng-packs/apps/dev-app/src/assets/form-config.json b/npm/ng-packs/apps/dev-app/src/assets/form-config.json
new file mode 100644
index 0000000000..1ea15cdefe
--- /dev/null
+++ b/npm/ng-packs/apps/dev-app/src/assets/form-config.json
@@ -0,0 +1,73 @@
+[
+  {
+    "key": "firstName",
+    "type": "text",
+    "label": "First Name",
+    "placeholder": "Enter first name",
+    "value": "erdemc",
+    "required": true,
+    "validators": [
+      { "type": "required", "message": "First name is required" },
+      { "type": "minLength", "value": 2, "message": "Minimum 2 characters required" }
+    ],
+    "gridSize": 6,
+    "order": 1
+  },
+  {
+    "key": "lastName",
+    "type": "text",
+    "label": "Last Name",
+    "placeholder": "Enter last name",
+    "required": true,
+    "validators": [{ "type": "required", "message": "Last name is required" }],
+    "gridSize": 12,
+    "order": 3
+  },
+  {
+    "key": "email",
+    "type": "email",
+    "label": "Email Address",
+    "placeholder": "Enter email",
+    "required": true,
+    "validators": [
+      { "type": "required", "message": "Email is required" },
+      { "type": "email", "message": "Please enter a valid email" }
+    ],
+    "gridSize": 6,
+    "order": 2
+  },
+  {
+    "key": "userType",
+    "type": "select",
+    "label": "User Type",
+    "required": true,
+    "options": [
+      { "key": "admin", "value": "Administrator" },
+      { "key": "user", "value": "Regular User" },
+      { "key": "guest", "value": "Guest User" }
+    ],
+    "validators": [{ "type": "required", "message": "Please select user type" }],
+    "order": 4
+  },
+  {
+    "key": "adminNotes",
+    "type": "textarea",
+    "label": "Admin Notes",
+    "placeholder": "Enter admin-specific notes",
+    "conditionalLogic": [
+      {
+        "dependsOn": "userType",
+        "condition": "equals",
+        "value": "admin",
+        "action": "show"
+      }
+    ],
+    "order": 5
+  },
+  {
+    "key": "isSelected",
+    "type": "checkbox",
+    "label": "Is Selected",
+    "order": 6
+  }
+]

From fc2fcaf37d7ef1507cc61f51eb4aea345f5b9bfb Mon Sep 17 00:00:00 2001
From: erdemcaygor <erdem.caygor@gmail.com>
Date: Wed, 3 Dec 2025 00:55:43 +0300
Subject: [PATCH 23/25] example

---
 .../apps/dev-app/src/assets/form-config.json  |   2 +-
 .../dynamic-form-field.component.html         | 133 ++++++++----------
 2 files changed, 58 insertions(+), 77 deletions(-)

diff --git a/npm/ng-packs/apps/dev-app/src/assets/form-config.json b/npm/ng-packs/apps/dev-app/src/assets/form-config.json
index 1ea15cdefe..d6876b9e96 100644
--- a/npm/ng-packs/apps/dev-app/src/assets/form-config.json
+++ b/npm/ng-packs/apps/dev-app/src/assets/form-config.json
@@ -26,7 +26,7 @@
   {
     "key": "email",
     "type": "email",
-    "label": "Email Address",
+    "label": "AbpAccount::EmailAddress",
     "placeholder": "Enter email",
     "required": true,
     "validators": [
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
index 8bd9ad1fbf..76e16181dd 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
@@ -1,81 +1,62 @@
 @if (visible()) {
-  <div [formGroup]="fieldFormGroup">
-    @if (field().type === 'text') {
-      <!-- Text Input -->
-      <div class="form-group">
-        <ng-container [ngTemplateOutlet]="labelTemplate" />
-        <input
-          [id]="field().key"
-          [placeholder]="field().placeholder || ''"
-          formControlName="value"
-          [class.is-invalid]="isInvalid"
-          class="form-control">
-        @if (isInvalid) {
-          <ng-container [ngTemplateOutlet]="errorTemplate"/>
-        }
-      </div>
-    } @else if (field().type === 'select') {
-      <!-- Select Dropdown -->
-      <div class="form-group">
-        <ng-container [ngTemplateOutlet]="labelTemplate" />
-        <select
-          [id]="field().key"
-          formControlName="value"
-          [class.is-invalid]="isInvalid"
-          class="form-control">
-          <option value="">Please select...</option>
-          @for (option of field().options; track option.key) {
-            <option
-              [value]="option.key">
-              {{ option.value }}
-            </option>
-          }
-        </select>
-        @if (isInvalid) {
-          <ng-container [ngTemplateOutlet]="errorTemplate"/>
-        }
-      </div>
-    } @else if (field().type === 'checkbox') {
-      <!-- Checkbox -->
-      <div class="form-group form-check">
-        <abp-checkbox [label]="field().label" formControlName="value" [id]="field().key" />
-        @if (isInvalid) {
-          <ng-container [ngTemplateOutlet]="errorTemplate"/>
-        }
-      </div>
-    } @else if (field().type === 'email') {
-      <!-- Email Input -->
-      <div class="form-group">
-        <label [for]="field().key">{{ field().label }}</label>
-        <input
-          type="email"
-          [id]="field().key"
-          formControlName="value"
-          [placeholder]="field().placeholder || ''"
-          [class.is-invalid]="isInvalid"
-          class="form-control">
-        @if (isInvalid) {
-          <ng-container [ngTemplateOutlet]="errorTemplate"/>
-        }
-      </div>
-    } @else if (field().type === 'textarea') {
-      <!-- Textarea -->
-      <div class="form-group">
-        <label [for]="field().key">{{ field().label }}</label>
-        <textarea
-          [id]="field().key"
-          formControlName="value"
-          [placeholder]="field().placeholder || ''"
-          [class.is-invalid]="isInvalid"
-          rows="4"
-          class="form-control">
+<div [formGroup]="fieldFormGroup">
+  @if (field().type === 'text') {
+  <!-- Text Input -->
+  <div class="form-group mb-3">
+    <ng-container [ngTemplateOutlet]="labelTemplate" />
+    <input [id]="field().key" [placeholder]="(field().placeholder || '') | abpLocalization" formControlName="value"
+      [class.is-invalid]="isInvalid" class="form-control">
+    @if (isInvalid) {
+    <ng-container [ngTemplateOutlet]="errorTemplate" />
+    }
+  </div>
+  } @else if (field().type === 'select') {
+  <!-- Select Dropdown -->
+  <div class="form-group mb-3">
+    <ng-container [ngTemplateOutlet]="labelTemplate" />
+    <select [id]="field().key" formControlName="value" [class.is-invalid]="isInvalid" class="form-control">
+      <option value="">{{ '::Select' | abpLocalization }}</option>
+      @for (option of field().options; track option.key) {
+      <option [value]="option.key">
+        {{ option.value | abpLocalization }}
+      </option>
+      }
+    </select>
+    @if (isInvalid) {
+    <ng-container [ngTemplateOutlet]="errorTemplate" />
+    }
+  </div>
+  } @else if (field().type === 'checkbox') {
+  <!-- Checkbox -->
+  <div class="form-group form-check mb-3">
+    <abp-checkbox [label]="field().label | abpLocalization" formControlName="value" [id]="field().key" />
+    @if (isInvalid) {
+    <ng-container [ngTemplateOutlet]="errorTemplate" />
+    }
+  </div>
+  } @else if (field().type === 'email') {
+  <!-- Email Input -->
+  <div class="form-group mb-3">
+    <ng-container [ngTemplateOutlet]="labelTemplate" />
+    <input type="email" [id]="field().key" formControlName="value"
+      [placeholder]="(field().placeholder || '') | abpLocalization" [class.is-invalid]="isInvalid" class="form-control">
+    @if (isInvalid) {
+    <ng-container [ngTemplateOutlet]="errorTemplate" />
+    }
+  </div>
+  } @else if (field().type === 'textarea') {
+  <!-- Textarea -->
+  <div class="form-group mb-3">
+    <ng-container [ngTemplateOutlet]="labelTemplate" />
+    <textarea [id]="field().key" formControlName="value" [placeholder]="(field().placeholder || '') | abpLocalization"
+      [class.is-invalid]="isInvalid" rows="4" class="form-control">
         </textarea>
-        @if (isInvalid) {
-          <ng-container [ngTemplateOutlet]="errorTemplate"/>
-        }
-      </div>
+    @if (isInvalid) {
+    <ng-container [ngTemplateOutlet]="errorTemplate" />
     }
   </div>
+  }
+</div>
 }
 
 <ng-template #labelTemplate>
@@ -85,7 +66,7 @@
 <ng-template #errorTemplate>
   <div class="invalid-feedback">
     @for (error of errors; track error) {
-      <div>{{ error | abpLocalization }}</div>
+    <div>{{ error | abpLocalization }}</div>
     }
   </div>
-</ng-template>
+</ng-template>
\ No newline at end of file

From 77f16cbef706ef943abdf06cb111da26d7d86635 Mon Sep 17 00:00:00 2001
From: erdemcaygor <erdem.caygor@gmail.com>
Date: Tue, 9 Dec 2025 18:16:02 +0300
Subject: [PATCH 24/25] dynamic options support added

---
 .../dynamic-form-field.component.html         |  2 +-
 .../dynamic-form-field.component.ts           | 30 ++++++++++++++++---
 .../dynamic-form/src/dynamic-form.models.ts   | 13 ++++++--
 .../dynamic-form/src/dynamic-form.service.ts  | 12 ++++++++
 4 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
index 76e16181dd..c07e215de5 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
@@ -16,7 +16,7 @@
     <ng-container [ngTemplateOutlet]="labelTemplate" />
     <select [id]="field().key" formControlName="value" [class.is-invalid]="isInvalid" class="form-control">
       <option value="">{{ '::Select' | abpLocalization }}</option>
-      @for (option of field().options; track option.key) {
+      @for (option of options$ | async; track option.key) {
       <option [value]="option.key">
         {{ option.value | abpLocalization }}
       </option>
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
index f7bd449352..d00588384a 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
@@ -22,9 +22,11 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet, AsyncPipe } from '@angular/common';
 import { LocalizationPipe } from '@abp/ng.core';
 import { FormCheckboxComponent } from '@abp/ng.theme.shared';
+import { Observable, of } from 'rxjs';
+import { DynamicFormService } from '../dynamic-form.service';
 
 export const ABP_DYNAMIC_FORM_FIELD = new InjectionToken<DynamicFormFieldComponent>('AbpDynamicFormField');
 
@@ -45,7 +47,7 @@ const DYNAMIC_FORM_FIELD_CONTROL_VALUE_ACCESSOR = {
   host: { class: 'abp-dynamic-form-field' },
   exportAs: 'abpDynamicFormField',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgTemplateOutlet, LocalizationPipe, ReactiveFormsModule, FormCheckboxComponent],
+  imports: [NgTemplateOutlet, LocalizationPipe, ReactiveFormsModule, FormCheckboxComponent, AsyncPipe],
 })
 export class DynamicFormFieldComponent implements OnInit, ControlValueAccessor {
   field = input.required<FormFieldConfig>();
@@ -56,6 +58,9 @@ export class DynamicFormFieldComponent implements OnInit, ControlValueAccessor {
   readonly destroyRef = inject(DestroyRef);
   private injector = inject(Injector);
   private formBuilder = inject(FormBuilder);
+  private dynamicFormService = inject(DynamicFormService);
+
+  options$: Observable<{ key: string; value: any }[]> = of([]);
 
   constructor() {
     this.fieldFormGroup = this.formBuilder.group({
@@ -71,6 +76,23 @@ export class DynamicFormFieldComponent implements OnInit, ControlValueAccessor {
     this.value.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
       this.onChange(value);
     });
+
+    const options = this.field().options;
+
+    if (options?.url) {
+      this.options$ = this.dynamicFormService.getOptions(options.url, options.apiName);
+    } else if (options?.defaultValues?.length) {
+      this.options$ = of(
+        options.defaultValues.map(item => {
+          return {
+            key: item[options.valueProp || 'key'] || item,
+            value: item[options.labelProp || 'value'] || item
+          };
+        })
+      );
+    } else {
+      this.options$ = of([]);
+    }
   }
 
   writeValue(value: any[]): void {
@@ -127,6 +149,6 @@ export class DynamicFormFieldComponent implements OnInit, ControlValueAccessor {
   get value() {
     return this.fieldFormGroup.get('value');
   }
-  private onChange: (value: any) => void = () => {};
-  private onTouched: () => void = () => {};
+  private onChange: (value: any) => void = () => { };
+  private onTouched: () => void = () => { };
 }
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.models.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.models.ts
index 716c252d7b..0d9a173e7a 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.models.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.models.ts
@@ -1,7 +1,7 @@
 import { Type } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 
-export interface FormFieldConfig {
+export interface FormFieldConfig<T = any> {
   key: string;
   value?: any;
   type: 'text' | 'email' | 'number' | 'select' | 'checkbox' | 'date' | 'textarea';
@@ -9,7 +9,7 @@ export interface FormFieldConfig {
   placeholder?: string;
   required?: boolean;
   disabled?: boolean;
-  options?: { key: string; value: any }[];
+  options?: OptionProps<T>;
   validators?: ValidatorConfig[];
   conditionalLogic?: ConditionalRule[];
   order?: number;
@@ -36,3 +36,12 @@ export enum ConditionalAction {
   ENABLE = 'enable',
   DISABLE = 'disable'
 }
+
+export interface OptionProps<T = any> {
+  defaultValues?: T[];
+  url?: string;
+  disabled?: (option: T) => boolean;
+  labelProp?: string;
+  valueProp?: string;
+  apiName?: string;
+}
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.service.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.service.ts
index d5c90bc70a..a7ce72b159 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.service.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.service.ts
@@ -1,6 +1,8 @@
 import {Injectable, inject} from '@angular/core';
 import {FormControl, FormGroup, ValidatorFn, Validators, FormBuilder} from '@angular/forms';
 import {FormFieldConfig, ValidatorConfig} from './dynamic-form.models';
+import { RestService } from '@abp/ng.core';
+import type { ProfileDto } from '@abp/ng.account.core/proxy';
 
 @Injectable({
   providedIn: 'root'
@@ -9,6 +11,8 @@ import {FormFieldConfig, ValidatorConfig} from './dynamic-form.models';
 export class DynamicFormService {
 
   private formBuilder = inject(FormBuilder);
+  private restService = inject(RestService);
+  apiName = 'DynamicFormService';
 
   createFormGroup(fields: FormFieldConfig[]): FormGroup {
     const group: any = {};
@@ -34,6 +38,14 @@ export class DynamicFormService {
     return initialValues;
   }
 
+  getOptions(url: string, apiName?: string): any {
+    return this.restService.request<any, any[]>({
+        method: 'GET',
+        url,
+      },
+      { apiName: apiName || this.apiName });
+  }
+
   private buildValidators(validatorConfigs: ValidatorConfig[]): ValidatorFn[] {
     return validatorConfigs.map(config => {
       switch (config.type) {

From 383100043ba61a6d4ffd39eab77b9f03e4473da0 Mon Sep 17 00:00:00 2001
From: erdemcaygor <erdem.caygor@gmail.com>
Date: Mon, 5 Jan 2026 18:08:21 +0300
Subject: [PATCH 25/25] log removed

---
 .../src/dynamic-form-field/dynamic-form-field.component.ts       | 1 -
 1 file changed, 1 deletion(-)

diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
index d00588384a..5026b1f3e4 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
@@ -131,7 +131,6 @@ export class DynamicFormFieldComponent implements OnInit, ControlValueAccessor {
         const validator = this.field().validators.find(
           v => v.type.toLowerCase() === key.toLowerCase(),
         );
-        console.log(this.field().validators, key);
         if (validator && validator.message) {
           return validator.message;
         }