Angular 中的單選按鈕

1. Angular 中的單選按鈕
2. 在 Angular 中繫結單選按鈕

我們將通過示例介紹如何在 Angular 中新增單選按鈕以及繫結和驗證單選按鈕。

Angular 中的單選按鈕

我們使用 Angular Material 庫在 Angular 中製作 UI/UX。Angular Material 為我們的專案提供了很多內建模組。

自動完成、日期選擇器、滑塊、選單、網格、工具欄和單選按鈕等元件通常使用 Angular Material。

在 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. 可以選擇一個元素，一個單選按鈕取消選擇其他元素。
3. 每個單選按鈕的 id 都是特殊的。對於頁面上使用的每個單選按鈕，我們必須有一個唯一的 id。
4. radio 元素也有 name 屬性。name 屬性可以建立一整組無線電物件。
5. 組中的單選按鈕具有相同的名稱，因為 HTML 使用 name 屬性來確定該單選按鈕來自哪個組，以確保僅選擇組中的一個按鈕。

在 Angular 中繫結單選按鈕

<mat-radio-button> 提供與原生 <input type="radio"> 相同的功能，增加了材料設計樣式和動畫。在單選按鈕中，使用者一次只能選擇一個值。

這就是為什麼具有相同名稱的單選按鈕包含一組，並且一次只能選擇一個。

radio-button 標籤用於實現 <mat-radio- button> 元素。我們可以通過設定標籤位置屬性 before 或 after 將標籤放置在單選按鈕之前或之後。

如果我們不需要標籤出現在單選按鈕旁邊，我們可以使用 aria-label 或 aria-labelledby 指定適用的標籤。

單選按鈕通常放置在 <mat-radio-group> 內，除非 DOM 網路無法實現。單選組具有記住組內當前選擇的單選按鈕的寶貴屬性。

單選組內的唯一單選按鈕將繼承該組的名稱。

<mat-radio-group> 非常適合@angular/forms 並帶有 Forms 和 Reactive Forms 模組。

現在我們將建立一個 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);
  }
}

輸出：