From 5fda0ff8b67cb6dea8a79c0ff5e30f47009913ef Mon Sep 17 00:00:00 2001 From: Galina Edinakova Date: Fri, 11 Jan 2019 11:50:42 +0200 Subject: [PATCH] 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. --- .../directives/input/input.directive.spec.ts | 31 +++++++++++++++++++ .../lib/directives/input/input.directive.ts | 11 +++++-- 2 files changed, 39 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 fc3d62b26c4..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,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 index e522ffe60cd..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,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; + } + } }