【Angular ReactiveForms】チェックボックスの値をLodashライブラリで処理

2024-04-16

Angular ReactiveForms: チェックボックスの値の配列を生成

このチュートリアルでは、Angular ReactiveForms を使用して、チェックボックスの値の配列を生成する方法を説明します。

必要なもの

Angular CLI
基本的な Angular 知識

手順

ReactiveForm を作成する

まず、ReactiveForm を作成する必要があります。このフォームには、チェックボックスの値を保持するプロパティが含まれます。

import { FormGroup, FormControl } from '@angular/forms';

export class CheckboxForm {
  checkboxes = new FormGroup({
    checkbox1: new FormControl(),
    checkbox2: new FormControl(),
    checkbox3: new FormControl(),
  });
}

テンプレートでチェックボックスをレンダリングする

次に、テンプレートでチェックボックスをレンダリングする必要があります。formGroup ディレクティブを使用して、フォームをテンプレートにバインドします。

<form [formGroup]="checkboxForm.checkboxes">
  <input type="checkbox" formControlName="checkbox1" />
  <input type="checkbox" formControlName="checkbox2" />
  <input type="checkbox" formControlName="checkbox3" />
</form>

チェックボックスの値を取得する

チェックボックスの値を取得するには、value プロパティを使用します。

const checkboxValues = this.checkboxForm.checkboxes.value;
console.log(checkboxValues); // { checkbox1: true, checkbox2: false, checkbox3: true }

チェックボックスの値の配列を生成するには、Object.values() メソッドを使用します。

const checkboxArray = Object.values(checkboxValues);
console.log(checkboxArray); // [true, false, true]

例

次の例は、上記の手順をすべて示しています。

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-checkbox-example',
  templateUrl: './checkbox-example.component.html',
  styleUrls: ['./checkbox-example.component.css'],
})
export class CheckboxExampleComponent implements OnInit {
  checkboxForm = new FormGroup({
    checkbox1: new FormControl(),
    checkbox2: new FormControl(),
    checkbox3: new FormControl(),
  });

  constructor() {}

  ngOnInit(): void {}

  getCheckboxValues() {
    const checkboxValues = this.checkboxForm.checkboxes.value;
    console.log(checkboxValues); // { checkbox1: true, checkbox2: false, checkbox3: true }

    const checkboxArray = Object.values(checkboxValues);
    console.log(checkboxArray); // [true, false, true]
  }
}

<form [formGroup]="checkboxForm.checkboxes">
  <input type="checkbox" formControlName="checkbox1" />
  <input type="checkbox" formControlName="checkbox2" />
  <input type="checkbox" formControlName="checkbox3" />

  <button (click)="getCheckboxValues()">Get Checkbox Values</button>
</form>

補足

チェックボックスの値を処理する前に、常に formGroup.dirty または formControl.dirty プロパティを使用して、フォームが変更されているかどうかを確認してください。
チェックボックスの値を検証するには、Validators.required などの検証器を使用できます。

サンプルコード：Angular ReactiveForms でチェックボックスの値の配列を生成する

HTML (checkbox-example.component.html)

<form [formGroup]="checkboxForm.checkboxes">
  <input type="checkbox" formControlName="checkbox1" />
  <input type="checkbox" formControlName="checkbox2" />
  <input type="checkbox" formControlName="checkbox3" />

  <button (click)="getCheckboxValues()">Get Checkbox Values</button>
</form>

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-checkbox-example',
  templateUrl: './checkbox-example.component.html',
  styleUrls: ['./checkbox-example.component.css'],
})
export class CheckboxExampleComponent implements OnInit {
  checkboxForm = new FormGroup({
    checkbox1: new FormControl(),
    checkbox2: new FormControl(),
    checkbox3: new FormControl(),
  });

  constructor() {}

  ngOnInit(): void {}

  getCheckboxValues() {
    const checkboxValues = this.checkboxForm.checkboxes.value;
    console.log(checkboxValues); // { checkbox1: true, checkbox2: false, checkbox3: true }

    const checkboxArray = Object.values(checkboxValues);
    console.log(checkboxArray); // [true, false, true]
  }
}

説明

HTML テンプレート:
- formGroup ディレクティブを使用して、checkboxForm.checkboxes フォームグループをテンプレートにバインドします。
- 各チェックボックスには、formControlName ディレクティブを使用して、対応するフォームコントロールが割り当てられます。
- getCheckboxValues() 関数を呼び出すボタンが追加されます。
TypeScript コンポーネント:
- CheckboxForm クラスは、checkbox1、checkbox2、checkbox3 という 3 つのチェックボックスに対応する FormControl インスタンスを持つ FormGroup インスタンスを初期化します。
- getCheckboxValues() 関数は、次の操作を実行します。
  - formGroup.value プロパティを使用して、チェックボックスの値のオブジェクトを取得します。
  - Object.values() メソッドを使用して、チェックボックスの値の配列を生成します。
  - コンソールにチェックボックスの値と配列を出力します。

実行方法

このコードを Angular プロジェクトに含めます。
コンポーネントをテンプレートで使用します。
ブラウザでアプリケーションを実行し、チェックボックスをオンオフにして、「Get Checkbox Values」ボタンをクリックします。

出力

コンソールに次の出力が表示されます。

{ checkbox1: true, checkbox2: false, checkbox3: true }
[true, false, true]

Angular ReactiveForms でチェックボックスの値の配列を生成するその他の方法

forEach ループを使用する

const checkboxValues = this.checkboxForm.checkboxes.value;
const checkboxArray = [];

checkboxValues.forEach((value, key) => {
  if (value) {
    checkboxArray.push(key);
  }
});

console.log(checkboxArray); // ["checkbox1", "checkbox3"]

この方法は、選択されたチェックボックスの名前の配列を生成する場合に便利です。

filter と map 関数を使用する

const checkboxValues = this.checkboxForm.checkboxes.value;
const checkboxArray = Object.keys(checkboxValues)
  .filter((key) => checkboxValues[key])
  .map((key) => key);

console.log(checkboxArray); // ["checkbox1", "checkbox3"]

lodash ライブラリを使用すると、_.compact() メソッドを使用して、チェックボックスの値の配列を簡単に生成できます。

import * as _ from 'lodash';

const checkboxValues = this.checkboxForm.checkboxes.value;
const checkboxArray = _.compact(Object.values(checkboxValues));

console.log(checkboxArray); // [true, true]

RxJS を使用すると、checkboxForm.valueChanges オブザーバブルを購読し、チェックボックスの値が変更されるたびにチェックボックスの値の配列を生成できます。

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

const checkboxValues$ = this.checkboxForm.valueChanges.pipe(
  map((values) => Object.values(values).filter((value) => value))
);

checkboxValues$.subscribe((checkboxArray) => {
  console.log(checkboxArray); // [true, true]
});