Adding markAsTouched to fix form validation (#16212)

* fix(input): Adding markAsTouched to fix form validation

* chore(input): Remove unnecessary fit

---------

Co-authored-by: Ivan Kitanov <[email protected]>
Co-authored-by: Hristo <[email protected]>

Author: 3 people

projects/igniteui-angular/src/lib/directives/input/input.directive.spec.ts

@@ -887,6 +887,27 @@ describe('IgxInput', () => {
 
         expect(igxInput.valid).toBe(IgxInputState.INITIAL);
     }));
+
+    it('should mark the reactive form control as touched when igxInput loses focus', fakeAsync(() => {
+        const fixture = TestBed.createComponent(ReactiveFormComponent);
+        fixture.detectChanges();
+
+        const component = fixture.componentInstance;
+        const formControl = component.form.get('str');
+        const inputDebug = fixture.debugElement.query(By.css('input[formControlName="str"]'));
+        const input = inputDebug.nativeElement;
+
+        expect(formControl.touched).toBe(false);
+
+        input.dispatchEvent(new Event('focus'));
+        fixture.detectChanges();
+
+        input.dispatchEvent(new Event('blur'));
+        tick();
+        fixture.detectChanges();
+
+        expect(formControl.touched).toBe(true);
+    }));
 });
 
 @Component({

projects/igniteui-angular/src/lib/directives/input/input.directive.ts

@@ -227,6 +227,9 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
     @HostListener('blur')
     public onBlur() {
         this.inputGroup.isFocused = false;
+        if (this.ngControl?.control) {
+            this.ngControl.control.markAsTouched();
+        }
         this.updateValidityState();
     }
     /** @hidden @internal */