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