refactoring

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

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

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

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>

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

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