dynamic form field validation logic updated

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

@@ -10,6 +10,7 @@
           [placeholder]="field().placeholder || ''"
           [ngModel]="value"
           (ngModelChange)="onValueChange($event)"
+          [class.is-invalid]="isValid"
           class="form-control">
         <!--      @if (isFieldInvalid()) {
                 <div class="invalid-feedback">
@@ -25,6 +26,7 @@
           [id]="field().key"
           [ngModel]="value"
           (ngModelChange)="onValueChange($event)"
+          [class.is-invalid]="isValid"
           class="form-control">
           <option value="">Please select...</option>
           @for (option of field().options; track option.key) {
@@ -48,6 +50,7 @@
           [id]="field().key"
           [ngModel]="value"
           (ngModelChange)="onValueChange($event)"
+          [class.is-invalid]="isValid"
           class="form-check-input">
         <label class="form-check-label" [for]="field().key">
           {{ field().label }}
@@ -68,6 +71,7 @@
           [ngModel]="value"
           (ngModelChange)="onValueChange($event)"
           [placeholder]="field().placeholder || ''"
+          [class.is-invalid]="isValid"
           class="form-control">
         <!--      @if (isFieldInvalid()) {
                 <div class="invalid-feedback">
@@ -84,6 +88,7 @@
           [ngModel]="value"
           (ngModelChange)="onValueChange($event)"
           [placeholder]="field().placeholder || ''"
+          [class.is-invalid]="isValid"
           rows="4"
           class="form-control">
         </textarea>

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

@@ -2,14 +2,29 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   forwardRef,
   inject,
-  InjectionToken,
+  InjectionToken, Injector,
   input,
+  OnInit,
 } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { FormFieldConfig } from '../dynamic-form.models';
-import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import {
+  AbstractControl,
+  ControlValueAccessor,
+  FormControl,
+  FormControlName,
+  FormGroupDirective,
+  FormsModule,
+  NG_VALIDATORS,
+  NG_VALUE_ACCESSOR,
+  NgControl,
+  ValidationErrors,
+  Validators,
+} from '@angular/forms';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 export const ABP_DYNAMIC_FORM_FIELD = new InjectionToken<DynamicFormFieldComponent>('AbpDynamicFormField');
 
@@ -22,26 +37,36 @@ const DYNAMIC_FORM_FIELD_CONTROL_VALUE_ACCESSOR = {
 @Component({
   selector: 'abp-dynamic-form-field',
   templateUrl: './dynamic-form-field.component.html',
-  providers: [{ provide: ABP_DYNAMIC_FORM_FIELD, useExisting: DynamicFormFieldComponent }, DYNAMIC_FORM_FIELD_CONTROL_VALUE_ACCESSOR],
-  host: { 'class': 'abp-dynamic-form-field' },
+  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,
-  imports: [
-    FormsModule,
-    NgTemplateOutlet
-  ]
+  imports: [FormsModule],
 })
-
-export class DynamicFormFieldComponent implements ControlValueAccessor {
+export class DynamicFormFieldComponent implements OnInit, ControlValueAccessor {
   field = input.required<FormFieldConfig>();
   visible = input<boolean>(true);
   disabled = false;
   value: any;
+  isFieldInvalid: boolean = false;
+  control!: FormControl;
   readonly changeDetectorRef = inject(ChangeDetectorRef);
+  readonly destroyRef = inject(DestroyRef);
+  private injector = inject(Injector);
+
+  ngOnInit() {
+    const ngControl = this.injector.get(NgControl, null);
+    if (ngControl) {
+      this.control = this.injector.get(FormGroupDirective).getControl(ngControl as FormControlName);
+    }
+  }
 
   onValueChange(value: any) {
-    console.log(value);
     this.onChange(value);
+    this.changeDetectorRef.markForCheck();
   }
 
   writeValue(value: any[]): void {
@@ -62,6 +87,13 @@ export class DynamicFormFieldComponent implements ControlValueAccessor {
     this.changeDetectorRef.markForCheck();
   }
 
+  get isValid(): boolean {
+    if (this.control) {
+      return this.control.invalid && (this.control.dirty || this.control.touched);
+    }
+    return true;
+  }
+
   private onChange: (value: any) => void = () => {};
   private onTouched: () => void = () => {};
 }

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

@@ -1,9 +1,18 @@
-import { ChangeDetectionStrategy, Component, input, output, inject, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+  inject,
+  OnInit,
+  DestroyRef,
+} 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';
 import { DynamicFormFieldComponent } from './dynamic-form-field';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'abp-dynamic-form',
@@ -17,9 +26,10 @@ export class DynamicFormComponent implements OnInit {
   submitButtonText = input<string>('Submit');
   submitInProgress = input<boolean>(false);
   showCancelButton = input<boolean>(false);
-  formSubmit = output<any>();
+  formSubmit = output<void>();
   formCancel = output<void>();
   private dynamicFormService = inject(DynamicFormService);
+  readonly destroyRef = inject(DestroyRef);
 
   dynamicForm!: FormGroup;
   fieldVisibility: { [key: string]: boolean } = {};
@@ -35,7 +45,6 @@ export class DynamicFormComponent implements OnInit {
   }
 
   onSubmit() {
-    console.log(this.dynamicForm.getRawValue());
     if (this.dynamicForm.valid) {
       this.formSubmit.emit(this.dynamicForm.value);
     } else {
@@ -67,7 +76,7 @@ export class DynamicFormComponent implements OnInit {
         field.conditionalLogic.forEach(rule => {
           const dependentControl = this.dynamicForm.get(rule.dependsOn);
           if (dependentControl) {
-            dependentControl.valueChanges.subscribe(() => {
+            dependentControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
               this.evaluateConditionalLogic(field.key);
             });
           }