feat(checkbox): implement validation (#12697)

* feat(checkbox): implement validation
---------

Co-authored-by: Simeon Simeonoff <[email protected]>

Author: SisIvanova

projects/igniteui-angular/src/lib/checkbox/checkbox.component.html

@@ -8,6 +8,8 @@
     [indeterminate]="indeterminate"
     [checked]="checked"
     [required]="required"
+    [attr.aria-required]="required"
+    [attr.aria-invalid]="invalid"
     [attr.aria-checked]="ariaChecked"
     [attr.aria-labelledby]="ariaLabel ? null : ariaLabelledBy"
     [attr.aria-label]="ariaLabel"

projects/igniteui-angular/src/lib/checkbox/checkbox.component.spec.ts

@@ -1,6 +1,6 @@
 import { Component, ViewChild } from '@angular/core';
 import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
-import { UntypedFormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { UntypedFormBuilder, FormsModule, ReactiveFormsModule, Validators, NgForm } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { IgxRippleModule } from '../directives/ripple/ripple.directive';
 import { IgxCheckboxComponent } from './checkbox.component';
@@ -21,6 +21,7 @@ describe('IgxCheckbox', () => {
                 CheckboxExternalLabelComponent,
                 CheckboxInvisibleLabelComponent,
                 CheckboxDisabledTransitionsComponent,
+                CheckboxFormComponent,
                 CheckboxFormGroupComponent,
                 IgxCheckboxComponent
             ],
@@ -275,6 +276,7 @@ describe('IgxCheckbox', () => {
         expect(nativeCheckbox.required).toBeTruthy();
 
         checkboxInstance.required = false;
+        nativeCheckbox.required = false;
         fixture.detectChanges();
 
         expect(checkboxInstance.required).toBe(false);
@@ -316,6 +318,79 @@ describe('IgxCheckbox', () => {
         expect(testInstance.clickCounter).toEqual(2);
     });
 
+    it('Should update style when required checkbox\'s value is set.', () => {
+        const fixture = TestBed.createComponent(CheckboxRequiredComponent);
+        fixture.detectChanges();
+
+        const checkboxInstance = fixture.componentInstance.cb;
+        const domCheckbox = fixture.debugElement.query(By.css('igx-checkbox')).nativeElement;
+
+        expect(domCheckbox.classList.contains('igx-checkbox--invalid')).toBe(false);
+        expect(checkboxInstance.invalid).toBe(false);
+        expect(checkboxInstance.checked).toBe(false);
+        expect(checkboxInstance.required).toBe(true);
+
+        dispatchCbEvent('keyup', domCheckbox, fixture);
+        expect(domCheckbox.classList.contains('igx-checkbox--focused')).toBe(true);
+        dispatchCbEvent('blur', domCheckbox, fixture);
+
+        expect(checkboxInstance.invalid).toBe(true);
+        expect(domCheckbox.classList.contains('igx-checkbox--invalid')).toBe(true);
+
+        dispatchCbEvent('keyup', domCheckbox, fixture);
+        expect(domCheckbox.classList.contains('igx-checkbox--focused')).toBe(true);
+        dispatchCbEvent('click', domCheckbox, fixture);
+
+        expect(domCheckbox.classList.contains('igx-checkbox--checked')).toBe(true);
+        expect(checkboxInstance.checked).toBe(true);
+        expect(checkboxInstance.invalid).toBe(false);
+        expect(domCheckbox.classList.contains('igx-checkbox--invalid')).toBe(false);
+
+        dispatchCbEvent('click', domCheckbox, fixture);
+        dispatchCbEvent('keyup', domCheckbox, fixture);
+        expect(domCheckbox.classList.contains('igx-checkbox--focused')).toBe(true);
+        dispatchCbEvent('blur', domCheckbox, fixture);
+
+        expect(checkboxInstance.checked).toBe(false);
+        expect(checkboxInstance.invalid).toBe(true);
+        expect(domCheckbox.classList.contains('igx-checkbox--invalid')).toBe(true);
+    });
+
+    it('Should work properly with ngModel', fakeAsync(() => {
+        const fixture = TestBed.createComponent(CheckboxFormComponent);
+        fixture.detectChanges();
+        tick();
+
+        const checkbox = fixture.componentInstance.checkbox;
+        expect(checkbox.invalid).toEqual(false);
+
+        checkbox.onBlur();
+        expect(checkbox.invalid).toEqual(true);
+
+        fixture.componentInstance.ngForm.resetForm();
+        tick();
+        expect(checkbox.invalid).toEqual(false);
+    }));
+
+    it('Should work properly with reactive forms validation.', () => {
+        const fixture = TestBed.createComponent(CheckboxFormGroupComponent);
+        fixture.detectChanges();
+
+        const checkbox = fixture.componentInstance.cb;
+        checkbox.checked = false;
+        expect(checkbox.required).toBe(true);
+        expect(checkbox.nativeElement.getAttribute('aria-required')).toEqual('true');
+        expect(checkbox.nativeElement.getAttribute('aria-invalid')).toEqual('false');
+
+        fixture.debugElement.componentInstance.markAsTouched();
+        fixture.detectChanges();
+
+        const invalidCheckbox = fixture.debugElement.nativeElement.querySelectorAll(`.igx-checkbox--invalid`);
+        expect(invalidCheckbox.length).toBe(1);
+        expect(checkbox.invalid).toBe(true);
+        expect(checkbox.nativeElement.getAttribute('aria-invalid')).toEqual('true');
+    });
+
     describe('EditorProvider', () => {
         it('Should return correct edit element', () => {
             const fixture = TestBed.createComponent(CheckboxSimpleComponent);
@@ -410,7 +485,37 @@ class CheckboxDisabledTransitionsComponent {
 class CheckboxFormGroupComponent {
     @ViewChild('cb', { static: true }) public cb: IgxCheckboxComponent;
 
-    public myForm = this.fb.group({ checkbox: [null] });
+    public myForm = this.fb.group({ checkbox: ['', Validators.required] });
 
     constructor(private fb: UntypedFormBuilder) {}
+
+    public markAsTouched() {
+        if (!this.myForm.valid) {
+            for (const key in this.myForm.controls) {
+                if (this.myForm.controls[key]) {
+                    this.myForm.controls[key].markAsTouched();
+                    this.myForm.controls[key].updateValueAndValidity();
+                }
+            }
+        }
+    }
 }
+@Component({
+    template: `
+    <form #form="ngForm">
+        <igx-checkbox #checkbox [(ngModel)]="subscribed" name="checkbox" required>Checkbox</igx-checkbox>
+    </form>
+`
+})
+class CheckboxFormComponent {
+    @ViewChild('checkbox', { read: IgxCheckboxComponent, static: true })
+    public checkbox: IgxCheckboxComponent;
+    @ViewChild(NgForm, { static: true })
+    public ngForm: NgForm;
+    public subscribed: string;
+}
+
+const dispatchCbEvent = (eventName, cbNativeElement, fixture) => {
+    cbNativeElement.dispatchEvent(new Event(eventName));
+    fixture.detectChanges();
+};