[SG-658] Refactor reactive form logic (#4375)

* Refactored login component to not show validation error when create account is clicked and refactored input directive to handle validation errors differenly

* Added comments to explain why mousedown event is used over click

* Removed unrelated logic from hasError fucnction and replace onFocus with onInpu to retain error message when focused

* Reverted to use touched on input directive hasError and renamed variable to isActive

* Added register to routerlink

libs/components/src/input/input.directive.ts

@@ -1,4 +1,13 @@
-import { Directive, ElementRef, HostBinding, Input, NgZone, Optional, Self } from "@angular/core";
+import {
+  Directive,
+  ElementRef,
+  HostBinding,
+  HostListener,
+  Input,
+  NgZone,
+  Optional,
+  Self,
+} from "@angular/core";
 import { NgControl, Validators } from "@angular/forms";
 
 import { BitFormFieldControl, InputTypes } from "../form-field/form-field-control";
@@ -67,8 +76,19 @@ export class BitInputDirective implements BitFormFieldControl {
     return this.id;
   }
 
+  private isActive = true;
+  @HostListener("blur")
+  onBlur() {
+    this.isActive = true;
+  }
+
+  @HostListener("input")
+  onInput() {
+    this.isActive = false;
+  }
+
   get hasError() {
-    return this.ngControl?.status === "INVALID" && this.ngControl?.touched;
+    return this.ngControl?.status === "INVALID" && this.ngControl?.touched && this.isActive;
   }
 
   get error(): [string, any] {