fix(igxInput): #3550 Setting required input value updates valid state. (

#3564) * test(igxInput): #3550 Test setting req input value updates valid state. * fix(igxInput): #3550 Setting required input value updates valid state. * fix(Input): #3550 Abstracted the validity check to a method.
IgniteUI · Jan 11, 2019 · 5fda0ff · 5fda0ff
1 parent c149128
commit 5fda0ff
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 3 deletions.
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
@@ -193,6 +193,37 @@ describe('IgxInput', () => {
         testRequiredValidation(inputElement, fixture);
     });
 
+    it('Should update style when required input\'s value is set.', () => {
+        const fixture = TestBed.createComponent(RequiredInputComponent);
+        fixture.detectChanges();
+
+        const igxInput = fixture.componentInstance.igxInput;
+        const inputElement = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
+
+        dispatchInputEvent('focus', inputElement, fixture);
+        dispatchInputEvent('blur', inputElement, fixture);
+
+        const inputGroupElement = fixture.debugElement.query(By.css('igx-input-group')).nativeElement;
+        expect(inputGroupElement.classList.contains(INPUT_GROUP_INVALID_CSS_CLASS)).toBe(true);
+        expect(igxInput.valid).toBe(IgxInputState.INVALID);
+
+        igxInput.value = 'test';
+        fixture.detectChanges();
+
+        expect(inputGroupElement.classList.contains(INPUT_GROUP_INVALID_CSS_CLASS)).toBe(false);
+        expect(igxInput.valid).toBe(IgxInputState.VALID);
+
+
+        igxInput.value = '';
+        fixture.detectChanges();
+
+        dispatchInputEvent('focus', inputElement, fixture);
+        dispatchInputEvent('blur', inputElement, fixture);
+
+        expect(inputGroupElement.classList.contains(INPUT_GROUP_INVALID_CSS_CLASS)).toBe(true);
+        expect(igxInput.valid).toBe(IgxInputState.INVALID);
+    });
+
     it('Should style required input with two-way databinding correctly.', () => {
         const fixture = TestBed.createComponent(RequiredTwoWayDataBoundInputComponent);
         fixture.detectChanges();

diff --git a/projects/igniteui-angular/src/lib/directives/input/input.directive.ts b/projects/igniteui-angular/src/lib/directives/input/input.directive.ts
@@ -52,6 +52,7 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
     @Input('value')
     set value(value: any) {
         this.nativeElement.value = value;
+        this.checkValidity();
     }
     /**
      * Gets the `value` propery.
@@ -144,9 +145,7 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
      */
     @HostListener('input')
     public onInput() {
-        if (!this.ngControl && this._hasValidators()) {
-            this._valid = this.nativeElement.checkValidity() ? IgxInputState.VALID : IgxInputState.INVALID;
-        }
+        this.checkValidity();
     }
     /**
      *@hidden
@@ -294,4 +293,10 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
     public set valid(value: IgxInputState) {
         this._valid = value;
     }
+
+    private checkValidity() {
+        if (!this.ngControl && this._hasValidators) {
+            this._valid = this.nativeElement.checkValidity() ? IgxInputState.VALID : IgxInputState.INVALID;
+        }
+    }
 }