Angular MAT-SELECTION-LIST绑定不适用于FormGroup？

我试图让MAT-SELECTION-LIST在一个被动表单中工作，创建一个检查表组，使用FormBuilder创建一个包含相关FormControl的FormGroup。本能地，我只想有一个这样的简单控制：

      this.clientForm= this.fb.group( {
    myOtherControl: [[]]
  })

<form [formGroup]="clientForm">

<h1>
  FormGroup Value
</h1>
<pre>
  {{ clientForm.get('myOtherControl').value | json }}
</pre>
<mat-selection-list id='2' formControlname="myOtherControl">
  <mat-list-option value="SOMETHING3">
    SOMETHING3
  </mat-list-option>
  <mat-list-option value="SOMETHING4">
    SOMETHING4
  </mat-list-option>
</mat-selection-list>
</form>

然后像这样使用它：

      this.clientForm= this.fb.group( {
    myOtherControl: [[]]
  })

<form [formGroup]="clientForm">

<h1>
  FormGroup Value
</h1>
<pre>
  {{ clientForm.get('myOtherControl').value | json }}
</pre>
<mat-selection-list id='2' formControlname="myOtherControl">
  <mat-list-option value="SOMETHING3">
    SOMETHING3
  </mat-list-option>
  <mat-list-option value="SOMETHING4">
    SOMETHING4
  </mat-list-option>
</mat-selection-list>
</form>

FormGroup值
{{clientForm.get（'myOtherControl'）.value | json}
有些事
有些事

问题是我无法让它注册任何更改-显示的值仍然是一个空数组。但是，如果我只使用一个裸FormControl，它会工作，我会看到反映的更改，例如：

        <form [formGroup]="clientForm">
     {{ clientForm.get('geos').value | json }}
     <mat-selection-list
       formControlName="geos"
       (selectionChange)="onActivitySelected($event)">

        <div fxLayout="row">
          <mat-list-option *ngFor="let geo of data.geos"
                       [value]="geo.id">
        {{geo.id}} {{geo.text}}
         </mat-list-option>
       </div>
     </mat-selection-list>
   </form>

FormControl值
{{myControl.value | json}
某物
什么

有关示例，请参见。有人知道这里发生了什么吗？我在角6/材料6上。我知道在选择选项等方面出现了各种问题，但看起来它们现在已经解决了，应该可以正常工作了吧

编辑-苏欧，这太奇怪了。正如在评论中指出的，如果您更正FormControlName上的类型，我的示例实际上是有效的。但那只是一个输入错误，我的实际代码仍然无法连接。但我现在可以从这个例子中看出，它应该！所以我决定将我的实际表单剥离到这一个控件，看看是否有任何东西可以强迫它连接到它的formControl。不信由你，在周围的div上去掉一个Flex布局属性就解决了这个问题！最重要的是，这在stackblitz示例中是不可复制的，即使使用完全相同版本的材质和flex布局。真是奇怪，在这上面浪费了好几个小时。因此，基本上，在我的HTML上下文（弹出对话框）中，这不起作用：

// component.ts
this.clientForm = this.fb.group( {
    myOtherControl: new FormControl([]) 
});

// component.html
<form [formGroup]="clientForm">
   <pre>
     {{ clientForm.get('myOtherControl').value | json }}
   </pre>

   <mat-selection-list formControlName="myOtherControl">
     <mat-list-option value="SOMETHING3">SOMETHING3</mat-list-option>
     <mat-list-option value="SOMETHING4">SOMETHING4</mat-list-option>
   </mat-selection-list>
</form>

{{clientForm.get（'geos'）.value | json}
{{geo.id}{{geo.text}

但这确实：

{{client.geos}
{{clientForm.get（'geos'）.value | json}
{{geo.id}{{geo.text}

---

将fxLayout=“row”从div移动到mat选择列表使其工作-令人恐惧

这确实是一个有趣的问题。我也遇到了。我可以通过这样做来修复它：

//component.ts
this.clientForm=this.fb.group（{
myOtherControl:新表单控件（[]）
});
//component.html
{{clientForm.get（'myOtherControl'）.value | json}
有些事
有些事

出于某种原因，您可能会收到IDE的投诉，

formControlName

是mat selection list的一个

未知属性，但它似乎工作正常

以下是一个例子：
您应该将值放在括号中：
我想你做得对！试试“formControlName”！你为什么要宣布myOtherControl为正式阵列？正常声明它，所选的值将以数组的形式自动分配给myOtherControl。是的，但我想说的是，它在HTML中，您输入“formControlname”，然后尝试使用“formControlname”！=）对不起，伙计们，我忘了叉stackbltz，所以你们看到了我开始使用的模板。现在请看一下，您需要用formControlname替换formControlname，正如@Chiien建议的那样