fix(input): update styles and asterisk on dynamically added/removed validator #10010 (#10023)

Author: IvayloG

projects/igniteui-angular/src/lib/directives/input/input.directive.spec.ts

@@ -1,12 +1,13 @@
 import { Component, ViewChild, ViewChildren, QueryList, DebugElement } from '@angular/core';
 import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
-import { FormsModule, FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { FormsModule, FormBuilder, ReactiveFormsModule, Validators, FormControl, FormGroup } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { IgxInputGroupComponent, IgxInputGroupModule } from '../../input-group/input-group.component';
 import { IgxInputDirective, IgxInputState } from './input.directive';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 
 const INPUT_CSS_CLASS = 'igx-input-group__input';
+const CSS_CLASS_INPUT_GROUP_LABEL = 'igx-input-group__label';
 const TEXTAREA_CSS_CLASS = 'igx-input-group__textarea';
 
 const INPUT_GROUP_FOCUSED_CSS_CLASS = 'igx-input-group--focused';
@@ -35,7 +36,8 @@ describe('IgxInput', () => {
                 DataBoundDisabledInputWithoutValueComponent,
                 ReactiveFormComponent,
                 InputsWithSameNameAttributesComponent,
-                ToggleRequiredWithNgModelInputComponent
+                ToggleRequiredWithNgModelInputComponent,
+                InputReactiveFormComponent
             ],
             imports: [
                 IgxInputGroupModule,
@@ -668,6 +670,69 @@ describe('IgxInput', () => {
         igxInput.value = 'Test';
         expect(igxInput.value).toBe('Test');
     });
+
+    it('Should properly initialize when used as a reactive form control - without initial validators/toggle validators', fakeAsync(() => {
+        const fix = TestBed.createComponent(InputReactiveFormComponent);
+        fix.detectChanges();
+        // 1) check if label's --required class and its asterisk are applied
+        const dom = fix.debugElement;
+        const input = fix.componentInstance.input;
+        const inputGroup = fix.componentInstance.igxInputGroup.element.nativeElement;
+        const formGroup: FormGroup = fix.componentInstance.reactiveForm;
+
+        // interaction test - expect actual asterisk
+        // The only way to get a pseudo elements like :before OR :after is to use getComputedStyle(element [, pseudoElt]),
+        // as these are not in the actual DOM
+        let asterisk = window.getComputedStyle(dom.query(By.css('.' + CSS_CLASS_INPUT_GROUP_LABEL)).nativeElement, ':after').content;
+        expect(asterisk).toBe('"*"');
+        expect(inputGroup.classList.contains(INPUT_GROUP_REQUIRED_CSS_CLASS)).toBe(true);
+
+        // 2) check that input group's --invalid class is NOT applied
+        expect(inputGroup.classList.contains(INPUT_GROUP_INVALID_CSS_CLASS)).toBe(false);
+
+        // interaction test - focus&blur, so the --invalid and --required classes are applied
+        // *Use markAsTouched() instead of user interaction ( calling focus + blur) because:
+        // Angular handles blur and marks the component as touched, however:
+        // in order to ensure Angular handles blur prior to our blur handler (where we check touched),
+        // we have to call blur twice.
+        fix.debugElement.componentInstance.markAsTouched();
+        tick();
+        fix.detectChanges();
+
+        expect(inputGroup.classList.contains(INPUT_GROUP_INVALID_CSS_CLASS)).toBe(true);
+        expect(inputGroup.classList.contains(INPUT_GROUP_REQUIRED_CSS_CLASS)).toBe(true);
+
+        // 3) Check if the input group's --invalid and --required classes are removed when validator is dynamically cleared
+        fix.componentInstance.removeValidators(formGroup);
+        fix.detectChanges();
+        tick();
+
+        const formReference = fix.componentInstance.reactiveForm.controls.fullName;
+        // interaction test - expect no asterisk
+        asterisk = window.getComputedStyle(dom.query(By.css('.' + CSS_CLASS_INPUT_GROUP_LABEL)).nativeElement, ':after').content;
+        expect(formReference).toBeDefined();
+        expect(input).toBeDefined();
+        expect(input.nativeElement.value).toEqual('');
+        expect(inputGroup.classList.contains(INPUT_GROUP_REQUIRED_CSS_CLASS)).toEqual(false);
+        expect(asterisk).toBe('none');
+        expect(input.valid).toEqual(IgxInputState.INITIAL);
+
+        // interact with the input and expect no changes
+        input.nativeElement.dispatchEvent(new Event('focus'));
+        input.nativeElement.dispatchEvent(new Event('blur'));
+        tick();
+        fix.detectChanges();
+        expect(input.valid).toEqual(IgxInputState.INITIAL);
+
+        // Re-add all Validators
+        fix.componentInstance.addValidators(formGroup);
+        fix.detectChanges();
+
+        expect(inputGroup.classList.contains(INPUT_GROUP_REQUIRED_CSS_CLASS)).toBe(true);
+        // interaction test - expect actual asterisk
+        asterisk = window.getComputedStyle(dom.query(By.css('.' + CSS_CLASS_INPUT_GROUP_LABEL)).nativeElement, ':after').content;
+        expect(asterisk).toBe('"*"');
+    }));
 });
 
 @Component({
@@ -922,6 +987,67 @@ class ToggleRequiredWithNgModelInputComponent {
     public data1 = '';
     public isRequired = false;
 }
+@Component({
+    template: `
+        <form [formGroup]="reactiveForm" (ngSubmit)="onSubmitReactive()">
+            <igx-input-group #igxInputGroup>
+                <input igxInput #inputReactive name="fullName" type="text" formControlName="fullName" />
+                <label igxLabel for="fullName">Full Name</label>
+                <igx-suffix>
+                    <igx-icon>person</igx-icon>
+                </igx-suffix>
+            </igx-input-group>
+        </form>
+`
+})
+
+class InputReactiveFormComponent {
+    @ViewChild('igxInputGroup', { static: true }) public igxInputGroup: IgxInputGroupComponent;
+    @ViewChild('inputReactive', { read: IgxInputDirective }) public input: IgxInputDirective;
+    public reactiveForm: FormGroup;
+
+    public validationType = {
+        fullName: [Validators.required]
+    };
+
+    constructor(fb: FormBuilder) {
+        this.reactiveForm = fb.group({
+            fullName: new FormControl('', Validators.required)
+        });
+    }
+    public onSubmitReactive() { }
+
+    public removeValidators(form: FormGroup) {
+        for (const key in form.controls) {
+            if (form.controls.hasOwnProperty(key)) {
+                form.get(key).clearValidators();
+                form.get(key).updateValueAndValidity();
+            }
+        }
+    }
+
+    public addValidators(form: FormGroup) {
+        for (const key in form.controls) {
+            if (form.controls.hasOwnProperty(key)) {
+                form.get(key).setValidators(this.validationType[key]);
+                form.get(key).updateValueAndValidity();
+            }
+        }
+    }
+
+    public markAsTouched() {
+        if (!this.reactiveForm.valid) {
+            for (const key in this.reactiveForm.controls) {
+                if (this.reactiveForm.controls.hasOwnProperty(key)) {
+                    if (this.reactiveForm.controls[key]) {
+                        this.reactiveForm.controls[key].markAsTouched();
+                        this.reactiveForm.controls[key].updateValueAndValidity();
+                    }
+                }
+            }
+        }
+    }
+}
 
 const testRequiredValidation = (inputElement, fixture) => {
     dispatchInputEvent('focus', inputElement, fixture);

projects/igniteui-angular/src/lib/directives/input/input.directive.ts

@@ -350,6 +350,9 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
     protected updateValidityState() {
         if (this.ngControl) {
             if (this.ngControl.control.validator || this.ngControl.control.asyncValidator) {
+                // Run the validation with empty object to check if required is enabled.
+                const error = this.ngControl.control.validator({} as AbstractControl);
+                this.inputGroup.isRequired = error && error.required;
                 if (!this.disabled && (this.ngControl.control.touched || this.ngControl.control.dirty)) {
                     // the control is not disabled and is touched or dirty
                     this._valid = this.ngControl.invalid ?
@@ -360,6 +363,10 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
                     //  with the input or when form/control is reset
                     this._valid = IgxInputState.INITIAL;
                 }
+            } else {
+                // If validator is dynamically cleared, reset label's required class(asterisk) and IgxInputState #10010
+                this._valid = IgxInputState.INITIAL;
+                this.inputGroup.isRequired = false;
             }
         } else {
             this.checkNativeValidity();