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 = () => {};
 }