この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
どうも!大阪オフィスの西村祐二です。
7月7日はクラスメソッドの創立記念日ですね。
タイトルだけだと何を言っているのかわからないかもですが、
つまりは、下記のような選択式のフォームでどの項目にチェックをつけたか、または外したかを判定する方法を紹介したいと思います。
結論
$event
でフォームに対して行った操作の情報を取得することができます。
※下記例では$event
はany型としてキャストしますのでご注意ください。
onSelectionChange
でチェックボックスにチェックしたときに、外したときのイベンドをキャッチします。その時の$event
をchangeという関数に渡します。
select.html
<mat-form-field>
<mat-select multiple placeholder="Favorite food">
<mat-option (onSelectionChange)="change($event)" *ngFor="let food of foods" [value]="food.value">
{{ food.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
isUserInput
でユーザの操作を判定し、event.source.selected
でチェックしたかを判定します。
下記ではチェックがつくと配列にvalueを追加し、チェックが外れるとvalueを削除しています。
select.ts
import {Component} from '@angular/core';
@Component({
selector: 'select',
templateUrl: 'select.html',
styleUrls: ['select.css'],
})
export class SelectExample {
selectedFoods: string[] = [];
foods = [
{value: 'steak-0', viewValue: 'Steak'},
{value: 'pizza-1', viewValue: 'Pizza'},
{value: 'tacos-2', viewValue: 'Tacos'},
{value: 'hotdog-3', viewValue: 'Hotdog'}
];
change(event)
{
if(event.isUserInput) {
if(event.source.selected) {
this.selectedFoods.push(event.source.value);
} else {
this.selectedFoods = this.selectedFoods.filter(food => food !== event.source.value );
}
console.log(this.selectedFoods);
}
}
}
動作確認
さいごに
選択式のフォームでどの項目にチェックをつけたか、または外したかを判定する方法について紹介しました。
商品登録する際につける商品のタグの選択や、アンケートなどのフォームの実装に役に立つのではないでしょうか。
誰かの参考になれば幸いです。