WEB-172 Merging all changes from main branch into dev branch (#2450)

src/app/directives/directives.module.ts

@@ -5,6 +5,7 @@ import { CommonModule } from '@angular/common';
 /** Custom Directives */
 import { HasPermissionDirective } from './has-permission/has-permission.directive';
 import { FormatAmountDirective } from './format-amount.directive';
+import { ValidateOnFocusDirective } from './validate-on-focus.directive';
 
 /**
  *  Directives Module
@@ -17,11 +18,13 @@ import { FormatAmountDirective } from './format-amount.directive';
   ],
   declarations: [
     HasPermissionDirective,
-    FormatAmountDirective
+    FormatAmountDirective,
+    ValidateOnFocusDirective
   ],
   exports: [
     HasPermissionDirective,
-    FormatAmountDirective
+    FormatAmountDirective,
+    ValidateOnFocusDirective
   ]
 })
 export class DirectivesModule {}

src/app/directives/validate-on-focus.directive.ts

@@ -0,0 +1,18 @@
+import { Directive, ElementRef, HostListener } from '@angular/core';
+import { NgControl } from '@angular/forms';
+
+@Directive({
+  selector: '[mifosxValidateOnFocus]'
+})
+export class ValidateOnFocusDirective {
+  constructor(
+    private control: NgControl,
+    private el: ElementRef
+  ) {}
+
+  @HostListener('focus')
+  onFocus() {
+    this.control.control?.markAsTouched();
+    this.control.control?.updateValueAndValidity();
+  }
+}