カテゴリー
AngularでInput要素をcheckboxタイプにしたときのフラグ切り替え制御を行う(ngModel無し)
※ 当ページには【広告/PR】を含む場合があります。
2022/04/27
Angularの細かいテクニックを不定期で紹介していくコーナーです。
今回はcheckboxタイプで使うInput要素に対して、スクリプト操作の双方向出入力によってチェックのON・OFFを切り替えする便利な小技を紹介します。
入力は[checked]属性、出力は(change)イベントを使いこなす
任意のAngularコンポーネントで、Input:checkbox要素のチェックの有無は
[checked]
Htmlテンプレートの部分だけでいうと、
<input id="hoge" type="checkbox" [checked]="true/falseを指定する">
という構成にすると、スクリプトからtrueかfalseの値を与えることでInputチェックボックス要素が制御可能です。
これだとInput要素への
そこでチェックボックスの値の変化をイベントとして返せるように、
(change)
<input id="hoge" type="checkbox"
[checked]="true/falseを指定する"
(change)="変化したときのイベントハンドラ" >
と、このように
では以下で、HogeとPiyoというInputチェックボックスを切り替える場合の簡単な例を
hoge.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-hoge',
template: `
<div>
<input id="hoge" type="checkbox" [checked]="checkboxes.isHoge" (change)="onCheckedChange($event)">
<label for="hoge">HOGE</label>
<input id="piyo" type="checkbox" [checked]="checkboxes.isPiyo" (change)="onCheckedChange($event)">
<label for="piyo">PIYO</label>
</div>
`,
styleUrls: ['./hoge.component.scss']
})
export class HogeComponent implements OnInit {
checkboxes: {isHoge: boolean, isPiyo: boolean};
ngOnInit() {
this.checkboxes = { isHoge: true, isPiyo: false};
}
onCheckedChange(e: any) {
const selectedInput: string = e.target.id;
if (/hoge/.test(selectedInput)) {
this.checkboxes.isHoge = true;
this.checkboxes.isPiyo = false;
}
else if (/piyo/.test(selectedInput)) {
this.checkboxes.isHoge = false;
this.checkboxes.isPiyo = true;
}
}
}
ちょっとだけ解説しますと、まずはチェックボックスの状態を表すフィールドを初期化の時点で用意します。
//👇即席でチェックボックスの状態に対応する型を準備
checkboxes: {isHoge: boolean, isPiyo: boolean};
ngOnInit() {
//👇初期状態を定義
this.checkboxes = { isHoge: true, isPiyo: false};
}
これで初期化時に各Input要素の
[checked]
他方チェックボックスがクリック操作されると、
(change)
以下の部分がInputのchangeイベントハンドラとなり、
onCheckedChange(e: any) {
//👇e.target.idから要素のId名を取得してどちらのInput要素か判断
const selectedInput: string = e.target.id;
if (/hoge/.test(selectedInput)) {
this.checkboxes.isHoge = true;
this.checkboxes.isPiyo = false;
}
else if (/piyo/.test(selectedInput)) {
this.checkboxes.isHoge = false;
this.checkboxes.isPiyo = true;
}
}
ここでInputのid値を読み取って、どちらのチェックボックスがクリックされたのかで、フラグ情報を保持するフィールドを適宜書き換えています。
これでAngularらしい柔軟なチェックボックスの切り替え操作ができるようになりました。 めでたしめでたし。
参考サイト
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー