Adding markAsTouched to fix form validation - 20.0.x

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 */