Menu

キーワード

  • Angular2
  • select multiple
  • ngModel

現象

select multipleにngModelで双方向バインディングしようとすると、

<select multiple [(ngModel)]="myModelProperty">
 ...
</select>

エラー。

error_handler.js:47 EXCEPTION: Uncaught (in promise): TypeError: values.map is not a function

原因

分からない。けど誰かがこう言っていた。

As others have said, it's not supported by default in Angular2 yet.

対策

select multipleで変更した値を自前で取得する。

<select multiple (change)="onChangeValuesSelect($event)">
 ...
</select>
private onChangeValuesSelect(event: any) {
  let values = Array
  .from(event.target.options)
  .filter((option: any) => option.selected)
  .map((option: any) => option.value);
}

備考

ただし、上記の方法は順方向のバインディングになっていない。双方向にする具体的なコードは参考記事を見てほしい。

$eventの内容はコンソール出力すればいろいろ見れる。

console.debug(event);

参考

スポンサーリンク