From be1adff3f15e76f339a65895954d4cecb8c9d0ac Mon Sep 17 00:00:00 2001 From: gedinakova Date: Wed, 9 Jan 2019 19:18:21 +0200 Subject: [PATCH 1/3] test(igxInput): #3550 Test setting req input value updates valid state. --- .../directives/input/input.directive.spec.ts | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) 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 fc3d62b26c4..ca9d1e0ccab 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 @@ -193,6 +193,27 @@ describe('IgxInput', () => { testRequiredValidation(inputElement, fixture); }); + fit('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); + }); + it('Should style required input with two-way databinding correctly.', () => { const fixture = TestBed.createComponent(RequiredTwoWayDataBoundInputComponent); fixture.detectChanges(); From 82e392b629e2393ee250429da108f1768dc2f08f Mon Sep 17 00:00:00 2001 From: gedinakova Date: Wed, 9 Jan 2019 19:26:37 +0200 Subject: [PATCH 2/3] fix(igxInput): #3550 Setting required input value updates valid state. --- .../src/lib/directives/input/input.directive.spec.ts | 12 +++++++++++- .../src/lib/directives/input/input.directive.ts | 3 +++ 2 files changed, 14 insertions(+), 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 ca9d1e0ccab..399cede3c4a 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 @@ -193,7 +193,7 @@ describe('IgxInput', () => { testRequiredValidation(inputElement, fixture); }); - fit('Should update style when required input\'s value is set.', () => { + it('Should update style when required input\'s value is set.', () => { const fixture = TestBed.createComponent(RequiredInputComponent); fixture.detectChanges(); @@ -212,6 +212,16 @@ describe('IgxInput', () => { 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.', () => { 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 e522ffe60cd..ed7717e64c9 100644 --- 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,9 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy { @Input('value') set value(value: any) { this.nativeElement.value = value; + if (!this.ngControl && this._hasValidators) { + this._valid = this.nativeElement.checkValidity() ? IgxInputState.VALID : IgxInputState.INVALID; + } } /** * Gets the `value` propery. From 50050e9736330cb7dab759596b491ac00d219a43 Mon Sep 17 00:00:00 2001 From: gedinakova Date: Thu, 10 Jan 2019 11:16:32 +0200 Subject: [PATCH 3/3] fix(Input): #3550 Abstracted the validity check to a method. --- .../src/lib/directives/input/input.directive.ts | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 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 ed7717e64c9..9a8dcb5b5e5 100644 --- a/projects/igniteui-angular/src/lib/directives/input/input.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/input/input.directive.ts @@ -52,9 +52,7 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy { @Input('value') set value(value: any) { this.nativeElement.value = value; - if (!this.ngControl && this._hasValidators) { - this._valid = this.nativeElement.checkValidity() ? IgxInputState.VALID : IgxInputState.INVALID; - } + this.checkValidity(); } /** * Gets the `value` propery. @@ -147,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 @@ -297,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; + } + } }