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 399cede3c4a..e9120672f4e 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 @@ -200,21 +200,24 @@ describe('IgxInput', () => { const igxInput = fixture.componentInstance.igxInput; const inputElement = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement; + 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); + 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.componentInstance.value = 'test'; fixture.detectChanges(); expect(inputGroupElement.classList.contains(INPUT_GROUP_INVALID_CSS_CLASS)).toBe(false); expect(igxInput.valid).toBe(IgxInputState.VALID); - igxInput.value = ''; + fixture.componentInstance.value = ''; fixture.detectChanges(); dispatchInputEvent('focus', inputElement, fixture); @@ -386,11 +389,12 @@ class DisabledInputComponent { @Component({ template: ` - + ` }) class RequiredInputComponent { @ViewChild('igxInputGroup') public igxInputGroup: IgxInputGroupComponent; @ViewChild(IgxInputDirective) public igxInput: IgxInputDirective; + value = ''; } @Component({ template: ` 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 9a8dcb5b5e5..ce85c152261 100644 --- a/projects/igniteui-angular/src/lib/directives/input/input.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/input/input.directive.ts @@ -9,7 +9,9 @@ import { Input, OnDestroy, Optional, - Self + Self, + OnChanges, + SimpleChanges } from '@angular/core'; import { AbstractControl, FormControlName, NgControl, NgModel } from '@angular/forms'; import { Subscription } from 'rxjs'; @@ -295,7 +297,7 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy { } private checkValidity() { - if (!this.ngControl && this._hasValidators) { + if (!this.ngControl && this._hasValidators()) { this._valid = this.nativeElement.checkValidity() ? IgxInputState.VALID : IgxInputState.INVALID; } }