refactor(validate-input.directive.ts): rewrite directive making it ag…

…nostic

libs/features/creature/src/creature-template/creature-template.component.html

@@ -48,14 +48,7 @@
             </div>
             <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
               <label for="maxLevel">Max Level</label>
-              <input
-                [keiraInputValidation]="editorService.form.get('maxlevel')"
-                [formControlName]="'maxlevel'"
-                id="maxlevel"
-                type="number"
-                class="form-control form-control-sm"
-              />
-              <keira-validation-feedback [control]="editorService.form.get('maxlevel')"></keira-validation-feedback>
+              <input keiraInputValidation [formControlName]="'maxlevel'" id="maxlevel" type="number" class="form-control form-control-sm" />
             </div>
             <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
               <label class="control-label" for="exp">expansion</label>

libs/features/creature/src/creature-template/creature-template.component.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterLink } from '@angular/router';
 import {
   CREATURE_AI_NAME,
   CREATURE_CLASS,
@@ -25,6 +26,7 @@ import {
 } from '@keira/shared/acore-world-model';
 import { SingleRowEditorComponent } from '@keira/shared/base-abstract-classes';
 import { QueryOutputComponent, TopBarComponent } from '@keira/shared/base-editor-components';
+import { InputValidationDirective } from '@keira/shared/directives';
 import {
   BooleanOptionSelectorComponent,
   CreatureSelectorBtnComponent,
@@ -39,9 +41,6 @@ import { TranslateModule } from '@ngx-translate/core';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { CreatureHandlerService } from '../creature-handler.service';
 import { CreatureTemplateService } from './creature-template.service';
-import { RouterLink } from '@angular/router';
-import { InputValidationDirective } from '@keira/shared/directives';
-import { ValidationFeedbackComponent } from '@keira/shared/error-templates';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -65,7 +64,6 @@ import { ValidationFeedbackComponent } from '@keira/shared/error-templates';
     IconSelectorComponent,
     RouterLink,
     InputValidationDirective,
-    ValidationFeedbackComponent,
   ],
 })
 export class CreatureTemplateComponent extends SingleRowEditorComponent<CreatureTemplate> {

libs/shared/directives/src/validate-input.directive.ts

@@ -1,24 +1,49 @@
-import { Directive, ElementRef, HostBinding, Input, OnInit } from '@angular/core';
-import { AbstractControl } from '@angular/forms';
+import { Directive, ElementRef, inject, OnInit, Renderer2 } from '@angular/core';
+import { AbstractControl, NgControl } from '@angular/forms';
+import { SubscriptionHandler } from '@keira/shared/utils';
 
 @Directive({
   selector: '[keiraInputValidation]',
   standalone: true,
 })
-export class InputValidationDirective implements OnInit {
-  @Input('keiraInputValidation') control!: AbstractControl | null;
+export class InputValidationDirective extends SubscriptionHandler implements OnInit {
+  private readonly el: ElementRef = inject(ElementRef);
+  private readonly renderer: Renderer2 = inject(Renderer2);
+  private readonly ngControl: NgControl = inject(NgControl);
 
-  constructor(private el: ElementRef) {}
+  private errorDiv: HTMLElement | null = null;
 
   ngOnInit(): void {
-    if (!this.control) {
-      console.warn('ValidationDirective: No control provided.');
+    const control = this.ngControl.control;
+
+    if (!control) {
       return;
     }
+
+    this.subscriptions.push(
+      control.statusChanges?.subscribe(() => {
+        this.updateErrorMessage(control);
+      }),
+    );
   }
 
-  @HostBinding('class.is-invalid')
-  get isInvalid(): boolean {
-    return !!this.control?.invalid && !!this.control?.touched;
+  private updateErrorMessage(control: AbstractControl): void {
+    if (this.errorDiv) {
+      this.renderer.removeChild(this.el.nativeElement.parentNode, this.errorDiv);
+      this.errorDiv = null;
+    }
+
+    if (control?.touched && control?.invalid) {
+      this.errorDiv = this.renderer.createElement('div');
+      this.renderer.addClass(this.errorDiv, 'error-message');
+
+      const errorMessage = control?.errors?.['required'] ? 'This field is required' : 'Invalid field';
+
+      const text = this.renderer.createText(errorMessage);
+      this.renderer.appendChild(this.errorDiv, text);
+
+      const parent = this.el.nativeElement.parentNode;
+      this.renderer.appendChild(parent, this.errorDiv);
+    }
   }
 }