diff --git a/projects/igniteui-angular/src/lib/directives/input/input.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/input/input.directive.spec.ts index 5142e7030fd..4a468efe6a2 100644 --- a/projects/igniteui-angular/src/lib/directives/input/input.directive.spec.ts +++ b/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({ diff --git a/projects/igniteui-angular/src/lib/directives/input/input.directive.ts b/projects/igniteui-angular/src/lib/directives/input/input.directive.ts index daf01c89904..6701290bd34 100644 --- a/projects/igniteui-angular/src/lib/directives/input/input.directive.ts +++ b/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 */