Merge branch 'master' into dTsvetkov/fix-9782-master

Author: hanastasov

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 { FormsModule } from '@angular/forms';
+import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { IgxRippleModule } from '../directives/ripple/ripple.directive';
 import { IgxCheckboxComponent } from './checkbox.component';
@@ -22,9 +22,10 @@ describe('IgxCheckbox', () => {
                 CheckboxExternalLabelComponent,
                 CheckboxInvisibleLabelComponent,
                 CheckboxDisabledTransitionsComponent,
+                CheckboxFormGroupComponent,
                 IgxCheckboxComponent
             ],
-            imports: [FormsModule, IgxRippleModule, NoopAnimationsModule]
+            imports: [FormsModule, ReactiveFormsModule, IgxRippleModule, NoopAnimationsModule]
         })
             .compileComponents();
     }));
@@ -34,7 +35,7 @@ describe('IgxCheckbox', () => {
         fixture.detectChanges();
 
         const checkbox = fixture.componentInstance.cb;
-        const nativeCheckbox = fixture.debugElement.query(By.css('input')).nativeElement;
+        const nativeCheckbox = checkbox.nativeCheckbox.nativeElement;
         const nativeLabel = checkbox.nativeLabel.nativeElement;
         const placeholderLabel = fixture.debugElement.query(By.css('.igx-checkbox__label')).nativeElement;
 
@@ -69,7 +70,7 @@ describe('IgxCheckbox', () => {
         fixture.detectChanges();
 
         expect(nativeCheckbox.checked).toBe(false);
-        expect(checkboxInstance.checked).toBe(false);
+        expect(checkboxInstance.checked).toBe(null);
 
         testInstance.subscribed = true;
         checkboxInstance.name = 'my-checkbox';
@@ -85,6 +86,22 @@ describe('IgxCheckbox', () => {
         expect(checkboxInstance.name).toEqual('my-checkbox');
     }));
 
+    it('Initializes with form group', () => {
+        const fixture = TestBed.createComponent(CheckboxFormGroupComponent);
+        fixture.detectChanges();
+
+        const testInstance = fixture.componentInstance;
+        const checkboxInstance = testInstance.cb;
+        const form = testInstance.myForm;
+
+        form.setValue({ checkbox: true });
+        expect(checkboxInstance.checked).toBe(true);
+
+        form.reset();
+
+        expect(checkboxInstance.checked).toBe(null);
+    });
+
     it('Initializes with external label', () => {
         const fixture = TestBed.createComponent(CheckboxExternalLabelComponent);
         const checkboxInstance = fixture.componentInstance.cb;
@@ -197,7 +214,7 @@ describe('IgxCheckbox', () => {
         fixture.detectChanges();
 
         // Should not update
-        expect(checkboxInstance.checked).toBe(false);
+        expect(checkboxInstance.checked).toBe(null);
         expect(testInstance.subscribed).toBe(false);
     });
 
@@ -398,3 +415,14 @@ class CheckboxInvisibleLabelComponent {
 class CheckboxDisabledTransitionsComponent {
     @ViewChild('cb', { static: true }) public cb: IgxCheckboxComponent;
 }
+
+@Component({
+    template: `<form [formGroup]="myForm"><igx-checkbox #cb formControlName="checkbox">Form Group</igx-checkbox></form>`
+})
+class CheckboxFormGroupComponent {
+    @ViewChild('cb', { static: true }) public cb: IgxCheckboxComponent;
+
+    public myForm = this.fb.group({ checkbox: [''] });
+
+    constructor(private fb: FormBuilder) {}
+}

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

@@ -428,9 +428,7 @@ export class IgxCheckboxComponent implements ControlValueAccessor, EditorProvide
 
     /** @hidden @internal */
     public writeValue(value: boolean) {
-        if (typeof value === 'boolean') {
-            this._checked = value;
-        }
+        this._checked = value;
     }
 
     /** @hidden @internal */

projects/igniteui-angular/src/lib/grids/cell.component.html

@@ -91,12 +91,9 @@
         </igx-input-group>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'boolean'">
-        <!-- The additional [checked] binding is needed as after the initial call of the checked getter
-        it is never called again as no change detection is triggered in the grid after that, resulting in wrong
-        rendered state of the checkbox. -->
         <igx-checkbox
-            [(ngModel)]="editValue"
             [checked]="editValue"
+            (change)="editValue = $event.checked"
             [igxFocus]="true"
             [disableRipple]="true"
         ></igx-checkbox>

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

@@ -1,6 +1,6 @@
 import { Component, ViewChild } from '@angular/core';
 import { TestBed, waitForAsync } from '@angular/core/testing';
-import { FormsModule } from '@angular/forms';
+import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { IgxRippleModule } from '../directives/ripple/ripple.directive';
 import { IgxSwitchComponent } from './switch.component';
@@ -19,9 +19,10 @@ describe('IgxSwitch', () => {
                 SwitchDisabledComponent,
                 SwitchExternalLabelComponent,
                 SwitchInvisibleLabelComponent,
+                SwitchFormGroupComponent,
                 IgxSwitchComponent
             ],
-            imports: [FormsModule, IgxRippleModule, NoopAnimationsModule]
+            imports: [FormsModule, ReactiveFormsModule, IgxRippleModule, NoopAnimationsModule]
         })
             .compileComponents();
     }));
@@ -68,7 +69,7 @@ describe('IgxSwitch', () => {
         fixture.detectChanges();
 
         expect(nativeCheckbox.checked).toBe(false);
-        expect(switchInstance.checked).toBe(false);
+        expect(switchInstance.checked).toBe(null);
 
         testInstance.subscribed = true;
         switchInstance.name = 'my-switch';
@@ -79,6 +80,22 @@ describe('IgxSwitch', () => {
         expect(switchInstance.name).toEqual('my-switch');
     });
 
+    it('Initializes with form group', () => {
+        const fixture = TestBed.createComponent(SwitchFormGroupComponent);
+        fixture.detectChanges();
+
+        const testInstance = fixture.componentInstance;
+        const switchInstance = testInstance.switch;
+        const form = testInstance.myForm;
+
+        form.setValue({ switch: true });
+        expect(switchInstance.checked).toBe(true);
+
+        form.reset();
+
+        expect(switchInstance.checked).toBe(null);
+    });
+
     it('Initializes with external label', () => {
         const fixture = TestBed.createComponent(SwitchExternalLabelComponent);
         const switchInstance = fixture.componentInstance.switch;
@@ -149,7 +166,7 @@ describe('IgxSwitch', () => {
         fixture.detectChanges();
 
         // Should not update
-        expect(switchInstance.checked).toBe(false);
+        expect(switchInstance.checked).toBe(null);
         expect(testInstance.subscribed).toBe(false);
     });
 
@@ -256,3 +273,14 @@ class SwitchInvisibleLabelComponent {
     @ViewChild('switch', { static: true }) public switch: IgxSwitchComponent;
     public label = 'Invisible Label';
 }
+
+@Component({
+    template: `<form [formGroup]="myForm"><igx-switch #switch formControlName="switch">Form Group</igx-switch></form>`
+})
+class SwitchFormGroupComponent {
+    @ViewChild('switch', { static: true }) public switch: IgxSwitchComponent;
+
+    public myForm = this.fb.group({ switch: [] });
+
+    constructor(private fb: FormBuilder) {}
+}

projects/igniteui-angular/src/lib/switch/switch.component.ts

@@ -337,9 +337,7 @@ export class IgxSwitchComponent implements ControlValueAccessor, EditorProvider
      * @internal
      */
     public writeValue(value: boolean) {
-        if (typeof value === 'boolean') {
-            this._checked = value;
-        }
+        this._checked = value;
     }
 
     /**

src/app/input/input.sample.html

@@ -122,6 +122,14 @@ <h4 class="sample-title">Checkbox sample</h4>
                     <span igxListLineTitle>Brian Vaughan</span>
                     <igx-checkbox igxListAction [(ngModel)]="user.registered" [indeterminate]="true" [disabled]="true">Value</igx-checkbox>
                 </igx-list-item>
+
+                <igx-list-item>
+                    <form [formGroup]="myForm">
+                        <igx-checkbox formControlName="checkbox">Form Group Checkbox</igx-checkbox>
+                        <igx-switch formControlName="switch">Form Group Switch</igx-switch>
+                    </form>
+                    <button igxButton (click)="myForm.reset()">Reset Form Group</button>
+                </igx-list-item>
             </igx-list>
         </div>
     </article>

src/app/input/input.sample.ts

@@ -1,4 +1,5 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
 import { IChangeRadioEventArgs } from 'igniteui-angular';
 
 @Component({
@@ -12,6 +13,11 @@ export class InputSampleComponent {
     public selected = 'option1';
     public airplaneMode = false;
 
+    public myForm = this.fb.group({
+        checkbox: [],
+        switch: []
+    });
+
     public user = {
         comment: '',
         firstName: 'John',
@@ -50,6 +56,8 @@ export class InputSampleComponent {
         disabled: true
     }];
 
+    constructor(private fb: FormBuilder) {}
+
     public onClick(event: MouseEvent) {
         console.log(event);
     }