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] 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 @@
         <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';