fix(input): update validity when control is marked as touched - 20.1.x (#16296)

Author: viktorkombov

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

@@ -908,6 +908,22 @@ describe('IgxInput', () => {
 
         expect(formControl.touched).toBe(true);
     }));
+
+    it('should update validity when control is marked as touched', fakeAsync(() => {
+        const fixture = TestBed.createComponent(ReactiveFormComponent);
+        fixture.detectChanges();
+
+        const component = fixture.componentInstance;
+        const igxInput = component.strIgxInput;
+
+        expect(igxInput.valid).toBe(IgxInputState.INITIAL);
+
+        component.markAllAsTouched();
+        tick();
+        fixture.detectChanges();
+
+        expect(igxInput.valid).toBe(IgxInputState.INVALID);
+    }));
 });
 
 @Component({
@@ -1201,6 +1217,12 @@ class ReactiveFormComponent {
         this.textareaControl.markAsTouched();
         this.textareaControl.updateValueAndValidity();
     }
+
+    public markAllAsTouched() {
+        if (!this.form.valid) {
+            this.form.markAllAsTouched();
+        }
+    }
 }
 
 @Component({

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

@@ -16,9 +16,10 @@ import {
 import {
     AbstractControl,
     NgControl,
-    NgModel
+    NgModel,
+    TouchedChangeEvent
 } from '@angular/forms';
-import { Subscription } from 'rxjs';
+import { filter, Subscription } from 'rxjs';
 import { IgxInputGroupBase } from '../../input-group/input-group.common';
 
 const nativeValidationAttributes = [
@@ -100,6 +101,7 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
     private _valid = IgxInputState.INITIAL;
     private _statusChanges$: Subscription;
     private _valueChanges$: Subscription;
+    private _touchedChanges$: Subscription;
     private _fileNames: string;
     private _disabled = false;
 
@@ -313,6 +315,14 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
             this._valueChanges$ = this.ngControl.valueChanges.subscribe(
                 this.onValueChanged.bind(this)
             );
+
+            if (this.ngControl.control) {
+                this._touchedChanges$ = this.ngControl.control.events
+                    .pipe(filter(e => e instanceof TouchedChangeEvent))
+                    .subscribe(
+                        this.updateValidityState.bind(this)
+                    );
+            }
         }
 
         this.cdr.detectChanges();
@@ -326,6 +336,10 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
         if (this._valueChanges$) {
             this._valueChanges$.unsubscribe();
         }
+
+        if (this._touchedChanges$) {
+            this._touchedChanges$.unsubscribe();
+        }
     }
     /**
      * Sets a focus on the igxInput.