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;
}
}