feat(selection-list): support for ngModel

* Adds support for NgModel to the selection-list.

Fixes #6896

Author: devversion

src/demo-app/list/list-demo.html

@@ -105,7 +105,9 @@ <h2>Nav lists</h2>
   <div>
     <h2>Selection list</h2>
 
-    <mat-selection-list #groceries>
+    <mat-selection-list #groceries [ngModel]="selectedOptions"
+                        (ngModelChange)="onSelectedOptionsChange($event)"
+                        (change)="changeEventCount = changeEventCount + 1">
       <h3 mat-subheader>Groceries</h3>
 
       <mat-list-option value="bananas">Bananas</mat-list-option>
@@ -114,7 +116,10 @@ <h3 mat-subheader>Groceries</h3>
       <mat-list-option value="strawberries">Strawberries</mat-list-option>
     </mat-selection-list>
 
-    <p>Selected: {{groceries.selectedOptions.selected.length}}</p>
+    <p>Selected: {{selectedOptions | json}}</p>
+    <p>Change Event Count {{changeEventCount}}</p>
+    <p>Model Change Event Count {{modelChangeEventCount}}</p>
+
     <p>
       <button mat-raised-button (click)="groceries.selectAll()">Select all</button>
       <button mat-raised-button (click)="groceries.deselectAll()">Deselect all</button>

src/demo-app/list/list-demo.ts

@@ -51,4 +51,13 @@ export class ListDemo {
 
   thirdLine: boolean = false;
   infoClicked: boolean = false;
+
+  selectedOptions: string[] = ['apples'];
+  changeEventCount: number = 0;
+  modelChangeEventCount: number = 0;
+
+  onSelectedOptionsChange(values: string[]) {
+    this.selectedOptions = values;
+    this.modelChangeEventCount++;
+  }
 }

src/lib/list/selection-list.spec.ts

@@ -2,12 +2,12 @@ import {DOWN_ARROW, SPACE, UP_ARROW} from '@angular/cdk/keycodes';
 import {Platform} from '@angular/cdk/platform';
 import {createKeyboardEvent, dispatchFakeEvent} from '@angular/cdk/testing';
 import {Component, DebugElement} from '@angular/core';
-import {async, ComponentFixture, inject, TestBed} from '@angular/core/testing';
+import {async, ComponentFixture, fakeAsync, inject, TestBed, tick} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
-import {MatListModule, MatListOption, MatSelectionList} from './index';
+import {MatListModule, MatListOption, MatSelectionList, MatSelectionListChange} from './index';
+import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
 
-
-describe('MatSelectionList', () => {
+describe('MatSelectionList without forms', () => {
   describe('with list option', () => {
     let fixture: ComponentFixture<SelectionListWithListOptions>;
     let listOptions: DebugElement[];
@@ -61,6 +61,28 @@ describe('MatSelectionList', () => {
       });
     });
 
+    it('should not emit a change event if an option changed programmatically', () => {
+      spyOn(fixture.componentInstance, 'onValueChange');
+
+      expect(fixture.componentInstance.onValueChange).toHaveBeenCalledTimes(0);
+
+      listOptions[2].componentInstance.toggle();
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.onValueChange).toHaveBeenCalledTimes(0);
+    });
+
+    it('should not emit a change event if an option got clicked', () => {
+      spyOn(fixture.componentInstance, 'onValueChange');
+
+      expect(fixture.componentInstance.onValueChange).toHaveBeenCalledTimes(0);
+
+      dispatchFakeEvent(listOptions[2].nativeElement, 'click');
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.onValueChange).toHaveBeenCalledTimes(1);
+    });
+
     it('should be able to dispatch one selected item', () => {
       let testListItem = listOptions[2].injector.get<MatListOption>(MatListOption);
       let selectList =
@@ -442,9 +464,165 @@ describe('MatSelectionList', () => {
   });
 });
 
+describe('MatSelectionList with forms', () => {
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MatListModule, FormsModule, ReactiveFormsModule],
+      declarations: [
+        SelectionListWithModel,
+        SelectionListWithFormControl
+      ]
+    });
+
+    TestBed.compileComponents();
+  }));
+
+  describe('and ngModel', () => {
+    let fixture: ComponentFixture<SelectionListWithModel>;
+    let selectionListDebug: DebugElement;
+    let selectionList: MatSelectionList;
+    let listOptions: MatListOption[];
+    let ngModel: NgModel;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(SelectionListWithModel);
+      fixture.detectChanges();
+
+      selectionListDebug = fixture.debugElement.query(By.directive(MatSelectionList));
+      selectionList = selectionListDebug.componentInstance;
+      ngModel = selectionListDebug.injector.get<NgModel>(NgModel);
+      listOptions = fixture.debugElement.queryAll(By.directive(MatListOption))
+        .map(optionDebugEl => optionDebugEl.componentInstance);
+    });
+
+    it('should update the model if an option got selected', fakeAsync(() => {
+      expect(fixture.componentInstance.selectedOptions.length)
+        .toBe(0, 'Expected no options to be selected by default');
+
+      listOptions[0].toggle();
+      fixture.detectChanges();
+
+      tick();
+
+      expect(fixture.componentInstance.selectedOptions.length)
+        .toBe(1, 'Expected first list option to be selected');
+    }));
+
+    it('should update the model if an option got clicked', fakeAsync(() => {
+      expect(fixture.componentInstance.selectedOptions.length)
+        .toBe(0, 'Expected no options to be selected by default');
+
+      dispatchFakeEvent(listOptions[0]._getHostElement(), 'click');
+      fixture.detectChanges();
+
+      tick();
+
+      expect(fixture.componentInstance.selectedOptions.length)
+        .toBe(1, 'Expected first list option to be selected');
+    }));
+
+    it('should update the options if a model value is set', fakeAsync(() => {
+      expect(fixture.componentInstance.selectedOptions.length)
+        .toBe(0, 'Expected no options to be selected by default');
+
+      fixture.componentInstance.selectedOptions = ['opt3'];
+      fixture.detectChanges();
+
+      tick();
+
+      expect(fixture.componentInstance.selectedOptions.length)
+        .toBe(1, 'Expected first list option to be selected');
+    }));
+
+    it('should set the selection-list to touched on blur', fakeAsync(() => {
+      expect(ngModel.touched)
+        .toBe(false, 'Expected the selection-list to be untouched by default.');
+
+      dispatchFakeEvent(selectionListDebug.nativeElement, 'blur');
+      fixture.detectChanges();
+
+      tick();
+
+      expect(ngModel.touched).toBe(true, 'Expected the selection-list to be touched after blur');
+    }));
+
+    it('should be pristine by default', fakeAsync(() => {
+      fixture = TestBed.createComponent(SelectionListWithModel);
+      fixture.componentInstance.selectedOptions = ['opt2'];
+      fixture.detectChanges();
+
+      ngModel =
+        fixture.debugElement.query(By.directive(MatSelectionList)).injector.get<NgModel>(NgModel);
+      listOptions = fixture.debugElement.queryAll(By.directive(MatListOption))
+        .map(optionDebugEl => optionDebugEl.componentInstance);
+
+      // Flush the initial tick to ensure that every action from the ControlValueAccessor
+      // happened before the actual test starts.
+      tick();
+
+      expect(ngModel.pristine)
+        .toBe(true, 'Expected the selection-list to be pristine by default.');
+
+      listOptions[1].toggle();
+      fixture.detectChanges();
+
+      tick();
+
+      expect(ngModel.pristine)
+        .toBe(false, 'Expected the selection-list to be dirty after state change.');
+    }));
+  });
+
+  describe('and formControl', () => {
+    let fixture: ComponentFixture<SelectionListWithFormControl>;
+    let selectionListDebug: DebugElement;
+    let selectionList: MatSelectionList;
+    let listOptions: MatListOption[];
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(SelectionListWithFormControl);
+      fixture.detectChanges();
+
+      selectionListDebug = fixture.debugElement.query(By.directive(MatSelectionList));
+      selectionList = selectionListDebug.componentInstance;
+      listOptions = fixture.debugElement.queryAll(By.directive(MatListOption))
+        .map(optionDebugEl => optionDebugEl.componentInstance);
+    });
+
+    it('should be able to disable options from the control', () => {
+      expect(listOptions.every(option => !option.disabled))
+        .toBe(true, 'Expected every list option to be enabled.');
+
+      fixture.componentInstance.formControl.disable();
+      fixture.detectChanges();
+
+      expect(listOptions.every(option => option.disabled))
+        .toBe(true, 'Expected every list option to be disabled.');
+    });
+
+    it('should be able to set the value through the form control', () => {
+      expect(listOptions.every(option => !option.selected))
+        .toBe(true, 'Expected every list option to be unselected.');
+
+      fixture.componentInstance.formControl.setValue(['opt2', 'opt3']);
+      fixture.detectChanges();
+
+      expect(listOptions[1].selected).toBe(true, 'Expected option to be selected.');
+      expect(listOptions[2].selected).toBe(true, 'Expected option to be selected.');
+
+      fixture.componentInstance.formControl.setValue(null);
+      fixture.detectChanges();
+
+      expect(listOptions.every(option => !option.selected))
+        .toBe(true, 'Expected every list option to be unselected.');
+    });
+  });
+});
+
 
 @Component({template: `
-  <mat-selection-list id="selection-list-1">
+  <mat-selection-list id="selection-list-1" (change)="onValueChange($event)">
     <mat-list-option checkboxPosition="before" disabled="true" value="inbox">
       Inbox (disabled selection-option)
     </mat-list-option>
@@ -461,20 +639,22 @@ describe('MatSelectionList', () => {
   </mat-selection-list>`})
 class SelectionListWithListOptions {
   showLastOption: boolean = true;
+
+  onValueChange(_change: MatSelectionListChange) {}
 }
 
 @Component({template: `
-  <mat-selection-list id = "selection-list-2">
-    <mat-list-option checkboxPosition = "after">
+  <mat-selection-list id="selection-list-2">
+    <mat-list-option checkboxPosition="after">
       Inbox (disabled selection-option)
     </mat-list-option>
-    <mat-list-option id = "testSelect" checkboxPosition = "after">
+    <mat-list-option id="testSelect" checkboxPosition="after">
       Starred
     </mat-list-option>
-    <mat-list-option checkboxPosition = "after">
+    <mat-list-option checkboxPosition="after">
       Sent Mail
     </mat-list-option>
-    <mat-list-option checkboxPosition = "after">
+    <mat-list-option checkboxPosition="after">
       Drafts
     </mat-list-option>
   </mat-selection-list>`})
@@ -523,3 +703,28 @@ class SelectionListWithSelectedOption {
   </mat-selection-list>`})
 class SelectionListWithOnlyOneOption {
 }
+
+@Component({
+  template: `
+    <mat-selection-list [(ngModel)]="selectedOptions">
+      <mat-list-option value="opt1">Option 1</mat-list-option>
+      <mat-list-option value="opt2">Option 2</mat-list-option>
+      <mat-list-option value="opt3">Option 3</mat-list-option>
+    </mat-selection-list>`
+})
+class SelectionListWithModel {
+  selectedOptions: string[] = [];
+}
+
+@Component({
+  template: `
+    <mat-selection-list [formControl]="formControl">
+      <mat-list-option value="opt1">Option 1</mat-list-option>
+      <mat-list-option value="opt2">Option 2</mat-list-option>
+      <mat-list-option value="opt3">Option 3</mat-list-option>
+    </mat-selection-list>
+  `
+})
+class SelectionListWithFormControl {
+  formControl = new FormControl();
+}