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 中單選按鈕的要點
- 單選按鈕成組出現。它們只有在放入組時才有意義。
- 可以選擇一個元素,一個單選按鈕取消選擇其他元素。
- 每個單選按鈕的 id 都是特殊的。對於頁面上使用的每個單選按鈕,我們必須有一個唯一的 id。
- radio 元素也有
name
屬性。name
屬性可以建立一整組無線電物件。 - 組中的單選按鈕具有相同的名稱,因為 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);
}
}
輸出:
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn