refactoring

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-->
+}

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

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>

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