Angular のラジオボタン

1. Angular のラジオボタン
2. Angular でラジオボタンをバインドする

例を使用して、Angular でラジオボタンを追加し、ラジオボタンをバインドおよび検証する方法を紹介します。

Angular のラジオボタン

AngularMaterial ライブラリを使用して Angular で UI/UX を作成しました。Angular マテリアルは、プロジェクトに多くの組み込みモジュールを提供します。

オートコンプリート、日付ピッカー、スライダー、メニュー、グリッド、ツールバー、ラジオボタンなどのコンポーネントは、通常、AngularMaterial を使用して使用されます。

Angular で HTML5 を使用してラジオボタンを作成する

ラジオボタンは、type プロパティが radio に設定された単純な入力要素です。ラジオボタンの構文を以下に示します。

# Angular
<input id="radio" type="radio" value="1">
<label for="radio">My Radio</label>

出力：

要素は名前なしでは識別できないため、すべての HTML 入力要素に名前を指定する必要があります。ラジオボタンが選択されている場合は、値を設定してサーバーに送信します。

以下に示す例でこれについて説明しましょう。

# Angular
<input type="radio" name="fruits" value="Apple">

name 属性は、ラジオオブジェクトのグループ全体を確立するために使用されます。単一のラジオボタンは意味がありません。

ラジオボタンのグループが必要です。単一のアイテムにチェックボックスを使用できますが、ラジオボタンを単一のアイテムとして使用する場合は意味がありません。

Angular のラジオボタンに関する重要なポイント

1. ラジオボタンはグループで発生します。それらはグループに入れられたときにのみ意味があります。
2. 1つの要素を選択でき、1つのラジオボタンで他の要素の選択を解除します。
3. 各ラジオボタンの ID は特別です。ページで使用されるラジオボタンごとに一意の ID が必要です。
4. ラジオ要素には name 属性もあります。name 属性は、ラジオオブジェクトのグループ全体を確立できます。
5. HTML は name 属性を使用してこのラジオボタンがどのグループからのものであるかを判断し、グループ内の 1つのボタンのみが選択されるようにするため、グループ内のラジオボタンの名前は同じです。

Angular でラジオボタンをバインドする

<mat-radio-button> は、ネイティブの <input type="radio"> と同じ機能を提供し、マテリアルデザインのスタイリングとアニメーションで増加します。ラジオボタンでは、ユーザーは一度に 1つの値のみを選択できます。

そのため、同じ名前のラジオボタンにはセットが含まれており、一度に選択できるのは 1つだけです。

radio-button ラベルは、<mat-radio- button> 要素を満たすために提供されています。ラベルの位置プロパティを前後に設定することで、ラジオボタンの前後にラベルを配置できます。

ラジオボタンの横にラベルを表示する必要がない場合は、aria-label または aria-labelledby を使用して、該当するラベルを指定できます。

ラジオボタンは、DOM ネットワークで不可能にならない限り、通常は <mat-radio-group> 内に配置されます。ラジオグループには、グループ内で現在選択されているラジオボタンを記憶するという貴重な特性があります。

ラジオグループ内の一意のラジオボタンは、このグループの名前を継承します。

<mat-radio-group> は@angular/forms に最適で、Forms モジュールと ReactiveForms モジュールの両方を備えています。

次に、Angular プロジェクトを作成し、Angular マテリアルライブラリをインストールします。最新の Angular CLI があります。

以下は、Angular プロジェクトを作成するために使用するコマンドです。

# Angular
ng new project

これらのコマンドを使用して hammer.js をインストールします。

# Angular
npm install --save hammerjs

これで、以下に示すコマンドを使用して Angular マテリアルをインストールできます。

# Angular
npm install --save @angular/material

これで、以下に示すコマンドを使用して Angular アニメーションをインストールできます。

# angular
npm install --save @angular/animations

以下に示すコマンドを使用して、Angular CDK をインストールできます。

# angular
npm install --save @angular/cdk

angular.json ファイル内に hammerjs を含めることができます。プロジェクトのルートにファイルがあります。

# Angular
"scripts": [
     "./node_modules/hammerjs/hammer.min.js"
]

それでは、ラジオボタンのグループを作成して、選択したラジオボタンの値を取得してみましょう。まず、以下に示すように、app.module.ts 内に FormsModule と ReactiveFormsModule をインポートします。

# angular
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

次に示すように、app.component.html ファイルにフロントエンドを作成します。

# angular
<div *ngFor="let fruit of fruits">
      <label for="{{fruit}}">
        <input id="{{fruit}}" [value]='fruit' type="radio" name="fruits" [(ngModel)]="favFruit">
        {{fruit}}
      </label>
</div>
<button (click)='radioFun'>Submit</button>

<div>
  <p>The selected Fruit is <b>{{favFruit}}</b></p>
</div>

出力：

次に、ラジオボタンをバインドして、選択したラジオボタンを表示します。app.component.ts ファイルを編集します。更新されたコードを以下に示します。

# angular
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  favFruit: string;
  fruits: string[] = ["Banana", "Apple", "Guava", "Strawberry"];

  radioFun(){
    return console.log(this.favFruit);
  }
}

出力：