AngularでInput要素をcheckboxタイプにしたときのフラグ切り替え制御を行う(ngModel無し)


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要素への
「チェック状態の入力部分」だけになってしまうので、チェックボックスをクリックしてチェックを切り替えてみても、初期状態のtrueかfalseかのどちらかに固定されてしまい、チェックの状態を切り替えることができません。

そこでチェックボックスの値の変化をイベントとして返せるように、
(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 5, HTML, boolean on checkbox is checked

記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。