title: MAT-SELECTION-LIST binding not working with FormGroup?
body: <p>I am trying to get MAT-SELECTION-LIST to work inside a reactive form, to make a checklist group, using FormBuilder to create a FormGroup with the relevant FormControl in it. Instinctively, I just want to have a simple control like this:</p>
  
  <pre><code>      this.clientForm= this.fb.group( {
      myOtherControl: [[]]
    })
  </code></pre>
  
  <p>and use it like this:</p>
  
  <pre><code>&lt;form [formGroup]="clientForm"&gt;
  
  &lt;h1&gt;
    FormGroup Value
  &lt;/h1&gt;
  &lt;pre&gt;
    {{ clientForm.get('myOtherControl').value | json }}
  &lt;/pre&gt;
  &lt;mat-selection-list id='2' formControlname="myOtherControl"&gt;
    &lt;mat-list-option value="SOMETHING3"&gt;
      SOMETHING3
    &lt;/mat-list-option&gt;
    &lt;mat-list-option value="SOMETHING4"&gt;
      SOMETHING4
    &lt;/mat-list-option&gt;
  &lt;/mat-selection-list&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The problem is I can't get this to register any changes - the value shown remains as an empty array. But if I just use a bare FormControl, it works and I see the changes reflected, for example:</p>
  
  <pre><code>    &lt;h1&gt;
    FormControl Value
  &lt;/h1&gt;
  
  &lt;pre&gt;
    {{ myControl.value | json }}
  &lt;/pre&gt;
  &lt;mat-selection-list id='1' [formControl]="myControl"&gt;
    &lt;mat-list-option value="SOMETHING"&gt;
      SOMETHING
    &lt;/mat-list-option&gt;
    &lt;mat-list-option value="SOMETHING2"&gt;
      SOMETHING2
    &lt;/mat-list-option&gt;
  &lt;/mat-selection-list&gt;
  </code></pre>
  
  <p>See <a href="https://stackblitz.com/edit/angular-material2-issue-yv1qaq" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-material2-issue-yv1qaq</a> for an example. Does anyone have any ideas what is going on here? I am on Angular 6/Material 6. I know there have been various issues with selectedOptions etc, but it looks like they are fixed now and this should just work?</p>
  
  <p>Edit - Sooo, this is bizarre. As was pointed out in the comments, my example actually works if you correct the type on FormControlName. But that was just a typo, my actual code still wasn't connecting. But I could now see from the example that it should! So I decided to strip down my actual form to this just this one control and see if anything could coerce it into connecting to its formControl. Believe it not, taking out a Flex Layout attribute on a surrounding div fixed it! And to top it off, this isn't reproducible in the stackblitz example, even with exact same versions of material and flex-layout. Totally freaky, wasted hours on this. So basically, in my HTML context (a pop up dialog box), this doesn't work :</p>
  
  <pre><code>        &lt;form [formGroup]="clientForm"&gt;
       {{ clientForm.get('geos').value | json }}
       &lt;mat-selection-list
         formControlName="geos"
         (selectionChange)="onActivitySelected($event)"&gt;
  
          &lt;div fxLayout="row"&gt;
            &lt;mat-list-option *ngFor="let geo of data.geos"
                         [value]="geo.id"&gt;
          {{geo.id}} {{geo.text}}
           &lt;/mat-list-option&gt;
         &lt;/div&gt;
       &lt;/mat-selection-list&gt;
     &lt;/form&gt;
  </code></pre>
  
  <p>But this does:</p>
  
  <pre><code>&lt;form [formGroup]="clientForm"&gt;
    {{client.geos}}
    &lt;!--GEOS--&gt;
    {{ clientForm.get('geos').value | json }}
    &lt;mat-selection-list
      formControlName="geos"
      (selectionChange)="onActivitySelected($event)"
      fxLayout="row"&gt;
      &lt;div &gt;
        &lt;mat-list-option *ngFor="let geo of data.geos"
                         [value]="geo.id"&gt;
          {{geo.id}} {{geo.text}}
        &lt;/mat-list-option&gt;
      &lt;/div&gt;
    &lt;/mat-selection-list&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Moving the fxLayout="row" from the div to the mat-selection-list made it work - frightening!</p>