From 6402b6958b6f385a1689b605dd4e75354cb09a5f Mon Sep 17 00:00:00 2001 From: gedinakova Date: Fri, 11 Jan 2019 17:12:26 +0200 Subject: [PATCH 1/4] fix(Input): #3550 CheckValidity in onChanges(). --- .../lib/directives/input/input.directive.spec.ts | 12 ++++++++---- .../src/lib/directives/input/input.directive.ts | 15 ++++++++++++--- 2 files changed, 20 insertions(+), 7 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 index 399cede3c4a..ce8778c0318 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(false); + expect(igxInput.valid).toBe(IgxInputState.INITIAL); + 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..d94d467d3b2 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'; @@ -26,7 +28,7 @@ export enum IgxInputState { @Directive({ selector: '[igxInput]' }) -export class IgxInputDirective implements AfterViewInit, OnDestroy { +export class IgxInputDirective implements AfterViewInit, OnChanges, OnDestroy { private _valid = IgxInputState.INITIAL; private _statusChanges$: Subscription; @@ -52,7 +54,6 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy { @Input('value') set value(value: any) { this.nativeElement.value = value; - this.checkValidity(); } /** * Gets the `value` propery. @@ -175,6 +176,14 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy { this.cdr.detectChanges(); } + /** + *@hidden + */ + ngOnChanges(changes: SimpleChanges) { + if (changes.value && !changes.value.firstChange) { + this.checkValidity(); + } + } /** *@hidden */ From 493d96a3762e3b7e91ddd926e9340530e4d027fa Mon Sep 17 00:00:00 2001 From: gedinakova Date: Mon, 14 Jan 2019 21:13:44 +0200 Subject: [PATCH 2/4] fix(Input): #3550 Fixed a bad validation check. --- .../src/lib/directives/input/input.directive.ts | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) 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 d94d467d3b2..ce85c152261 100644 --- a/projects/igniteui-angular/src/lib/directives/input/input.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/input/input.directive.ts @@ -28,7 +28,7 @@ export enum IgxInputState { @Directive({ selector: '[igxInput]' }) -export class IgxInputDirective implements AfterViewInit, OnChanges, OnDestroy { +export class IgxInputDirective implements AfterViewInit, OnDestroy { private _valid = IgxInputState.INITIAL; private _statusChanges$: Subscription; @@ -54,6 +54,7 @@ export class IgxInputDirective implements AfterViewInit, OnChanges, OnDestroy { @Input('value') set value(value: any) { this.nativeElement.value = value; + this.checkValidity(); } /** * Gets the `value` propery. @@ -176,14 +177,6 @@ export class IgxInputDirective implements AfterViewInit, OnChanges, OnDestroy { this.cdr.detectChanges(); } - /** - *@hidden - */ - ngOnChanges(changes: SimpleChanges) { - if (changes.value && !changes.value.firstChange) { - this.checkValidity(); - } - } /** *@hidden */ @@ -304,7 +297,7 @@ export class IgxInputDirective implements AfterViewInit, OnChanges, OnDestroy { } private checkValidity() { - if (!this.ngControl && this._hasValidators) { + if (!this.ngControl && this._hasValidators()) { this._valid = this.nativeElement.checkValidity() ? IgxInputState.VALID : IgxInputState.INVALID; } } From 6b0947cbc0e2c134cbbb63f23db3623e3a638b17 Mon Sep 17 00:00:00 2001 From: gedinakova Date: Wed, 16 Jan 2019 12:02:28 +0200 Subject: [PATCH 3/4] fix(Input): #3550 Fixed failing test. --- .../src/lib/directives/input/input.directive.spec.ts | 6 +++--- 1 file changed, 3 insertions(+), 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 index ce8778c0318..1f909dcff65 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 @@ -18,7 +18,7 @@ const INPUT_GROUP_REQUIRED_CSS_CLASS = 'igx-input-group--required'; const INPUT_GROUP_VALID_CSS_CLASS = 'igx-input-group--valid'; const INPUT_GROUP_INVALID_CSS_CLASS = 'igx-input-group--invalid'; -describe('IgxInput', () => { +fdescribe('IgxInput', () => { configureTestSuite(); beforeEach(async(() => { TestBed.configureTestingModule({ @@ -201,8 +201,8 @@ describe('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(false); - expect(igxInput.valid).toBe(IgxInputState.INITIAL); + 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); From a504c7b948fafb28ba614a1725e1df4f98d2fb3a Mon Sep 17 00:00:00 2001 From: gedinakova Date: Wed, 16 Jan 2019 12:02:52 +0200 Subject: [PATCH 4/4] fix(Input): #3550 Removed f. --- .../src/lib/directives/input/input.directive.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 1f909dcff65..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 @@ -18,7 +18,7 @@ const INPUT_GROUP_REQUIRED_CSS_CLASS = 'igx-input-group--required'; const INPUT_GROUP_VALID_CSS_CLASS = 'igx-input-group--valid'; const INPUT_GROUP_INVALID_CSS_CLASS = 'igx-input-group--invalid'; -fdescribe('IgxInput', () => { +describe('IgxInput', () => { configureTestSuite(); beforeEach(async(() => { TestBed.configureTestingModule({