Angular_ラジオボタンを実装する　#371

mat-radio-buttonは、Angular Materialライブラリの一部であり、ユーザーが複数のオプションから1つだけ選択できるようにするためのUIコンポーネントです。ラジオボタンは、一般的に複数の選択肢が並んで表示され、ユーザーが1つだけ選択できるようになっています。選択されると、他の選択肢は自動的に選択解除されます。

機能と役割

mat-radio-buttonは、以下のような機能と役割があります。

1. 選択肢の表示: 複数の選択肢を表示し、ユーザーがそれらの中から1つを選択できるようにします。

2. 選択の制限: 同じグループ内で1つだけ選択できるように制限し、ユーザーが複数の選択肢を誤って選択することを防ぎます。

3. スタイリング: Angular Materialライブラリはデフォルトで美しいデザインとアニメーションが提供されており、mat-radio-buttonもこれらのスタイリングが適用されます。もちろんカスタムも可能です。

4. フォームとの連携: mat-radio-buttonはAngularのReactive FormsやTemplate-driven Formsと簡単に連携できるように設計されています。これにより、フォームの値の取得やバリデーションが容易になります。

公式に載っているサンプルコードは以下です。

<mat-radio-group aria-label="Select an option">
  <mat-radio-button value="1">Option 1</mat-radio-button>
  <mat-radio-button value="2">Option 2</mat-radio-button>
</mat-radio-group>

使い方

mat-radio-buttonの基本的な使い方は以下の通りです。

1. 必要なモジュールをインポートする。MatRadioModuleを@NgModuleのimports配列に追加します。

2. mat-radio-groupコンポーネントを使用して、複数のmat-radio-buttonをグループ化します。このグループ化により、同じグループ内のラジオボタンは互いに選択の排他制御が行われます。

3. mat-radio-buttonコンポーネントを作成し、選択肢の表示や値の設定を行います。選択された値を取得するには、mat-radio-groupにngModelディレクティブやReactive FormsのformControlをバインドします。

4. 必要に応じて、選択された値が変更されたときに実行されるイベントハンドラーを追加します。ユーザーが選択肢を選択または変更したときに、アプリケーションで特定の処理を実行できます。

実装例

htmlでmat-radio-buttonを使うための下準備です。

[shared.module.ts]

import { MatRadioModule } from '@angular/material/radio';
 
@NgModule({
  declarations: [
   ~  省略  ~
  ],
  exports: [
    MatRadioModule,
  ],
  imports: [
    MatRadioModule,
  ],
  providers: [],
  bootstrap: []
})
export class SharedModule {}

ダイアログを開いた先にラジオボタンで選択肢が表示されるようになっています。enterprisesという配列をfor文で回し、各要素にラジオボタンが付くようになっています。それがmat-radio-groupに収まっている形です。

  <mat-radio-group [ngModel]="selectedEnterprise">
    <mat-list>
      <mat-list-item *ngFor="let enterprise of enterprises">
        <mat-radio-button [value]="enterprise" (change)="selectEnterprise(enterprise)">
          {{ enterprise.name }} | {{ enterprise.area }}
        </mat-radio-button>
      </mat-list-item>
    </mat-list>
  </mat-radio-group>

TypeScriptファイルは以下です。ラジオボタンをクリックした際の処理はselectEnterpriseで定義しています。また、ダイアログを閉じる時に選んだ値が渡されるようになっています。

export class SwitchEnterpriseComponent implements OnInit {
  public selectedEnterprise: Enterprise;
  public enterprises: Enterprise[];
  public nowEnterprise: number;
 
  constructor(
    public dialogRef: MatDialogRef<LoginedHeaderComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {
    this.enterprises = data.enterprises;
    this.nowEnterprise = data.nowEnterprise;
  }
 
  closeDialog(): void {
    if (this.selectedEnterprise.id !== this.nowEnterprise) {
      this.dialogRef.close(this.selectedEnterprise);
    } else {
      this.dialogRef.close();
    }
  }
  selectEnterprise(enterprise: Enterprise): void {
    this.selectedEnterprise = enterprise;
  }

ここまでお読みいただきありがとうございました！

参考

Angular Material