Question

我正在尝试让MAT-SELECTION-LIST在反应形式中工作，制作一个清单组，使用FormBuilder创建一个FormGroup，其中包含相关的FormControl。本能地，我只想拥有这样一个简单的控件：

      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>

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

    <h1>
  FormControl Value
</h1>

<pre>
  {{ myControl.value | json }}
</pre>
<mat-selection-list id='1' [formControl]="myControl">
  <mat-list-option value="SOMETHING">
    SOMETHING
  </mat-list-option>
  <mat-list-option value="SOMETHING2">
    SOMETHING2
  </mat-list-option>
</mat-selection-list>

有关示例，请参阅https://stackblitz.com/edit/angular-material2-issue-yv1qaq。有没有人有任何想法在这里发生了什么？我在Angular 6 / Material 6上。我知道selectOptions等存在各种问题，但看起来它们现在已修复，这应该有效吗？

编辑 - Sooo，这很奇怪。正如在评论中指出的那样，如果你更正FormControlName上的类型，我的例子实际上是有效的。但这只是一个错字，我的实际代码仍然没有连接。但我现在可以从示例中看到它应该！所以我决定将我的实际形式删除到这个只有这一个控件，看看是否有任何东西可以强制它连接到它的formControl。不相信，在周围的div上取出Flex Layout属性固定它！最重要的是，这在stackblitz示例中是不可重现的，即使使用完全相同的材料版本和flex-layout也是如此。完全怪异，浪费了几个小时。所以基本上，在我的HTML上下文（弹出对话框）中，这不起作用：

        <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>

但这样做：

<form [formGroup]="clientForm">
  {{client.geos}}
  <!--GEOS-->
  {{ clientForm.get('geos').value | json }}
  <mat-selection-list
    formControlName="geos"
    (selectionChange)="onActivitySelected($event)"
    fxLayout="row">
    <div >
      <mat-list-option *ngFor="let geo of data.geos"
                       [value]="geo.id">
        {{geo.id}} {{geo.text}}
      </mat-list-option>
    </div>
  </mat-selection-list>
</form>

移动fxLayout =＆＃34; row＆＃34;从div到mat-selection-list让它起作用 - 可怕！

Answer 1

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

// 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>

由于某种原因，您可能会从IDE中抱怨formControlName是unknown attribute of mat-selection-list，但似乎工作得很好。

这里是一个示例： https://stackblitz.com/edit/angular-material2-issue-gnwvxq

Answer 2

您应该将值放在方括号中：

MAT-SELECTION-LIST绑定不能与FormGroup一起使用？

2 个答案: