Angularのリアクティブフォームでラジオボタンを使用する方法

1. フォームのセットアップ:

   • AngularのFormsModuleをインポートします。
   • FormGroupを作成し、FormControlを使用してラジオボタンの状態を管理します。

2. テンプレートでラジオボタンを表示:

   • ngModelディレクティブを使用して、ラジオボタンの値をフォームコントロールにバインドします。
   • *ngForディレクティブを使用して、ラジオボタンのオプションを反復処理します。

3. フォームの送信と値の取得:

   • submitメソッドを作成し、フォームの値を取得します。
   • フォームの値は、FormGroupのvalueプロパティを使用してアクセスできます。

以下に、具体的なコード例を示します。

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
  selector: 'app-radio-button-form',
  templateUrl: './radio-button-form.component.html',
  styleUrls: ['./radio-button-form.component.css']
})
export class RadioButtonFormComponent {
  myForm: FormGroup;
  constructor() {
    this.myForm = new FormGroup({
      gender: new FormControl('male') // デフォルトの選択肢を設定します
    });
  }
  onSubmit() {
    console.log(this.myForm.value);
  }
}

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <label>
    <input type="radio" formControlName="gender" value="male">
    男性
  </label>
  <label>
    <input type="radio" formControlName="gender" value="female">
    女性
  </label>
  <label>
    <input type="radio" formControlName="gender" value="other">
    その他
  </label>

  <button type="submit">送信</button>
</form>

上記のコードでは、RadioButtonFormComponentクラスでフォームをセットアップし、テンプレートでラジオボタンを表示しています。フォームが送信されると、onSubmitメソッドが呼び出され、選択されたラジオボタンの値がコンソールに表示されます。

この方法を使用すると、Angularのリアクティブフォームを介して簡単にラジオボタンを実装できます。