form field updated

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>

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">

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();

npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html

@@ -11,16 +11,18 @@
     </div>
   }
   <div class="form-actions">
-    <button
+    @if (showCancelButton()) {
-      type="button"
+      <button
-      class="btn btn-secondary"
+        type="button"
-      (click)="onCancel()">
+        class="btn btn-secondary"
-      Cancel
+        (click)="onCancel()">
-    </button>
+        Cancel
+      </button>
+    }
     <button
       type="submit"
       class="btn btn-primary"
-      [disabled]="!dynamicForm.valid || isSubmitting">
+      [disabled]="!dynamicForm.valid || submitInProgress()">
       {{ submitButtonText() }}
     </button>
   </div>

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();

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;

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