迹忆客 专注技术分享

我们将通过示例介绍如何在 Angular 中添加单选按钮以及绑定和验证单选按钮。

Angular 中的单选按钮

我们使用 Angular Material 库在 Angular 中制作 UI/UX。Angular Material 为我们的项目提供了很多内置模块。

自动完成、日期选择器、滑块、菜单、网格、工具栏和单选按钮等组件通常使用 Angular Material。

在 Angular 中使用 HTML5 创建单选按钮

单选按钮是一个简单的输入元素，其 type 属性设置为 radio。单选按钮的语法如下所示。

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

输出：

我们需要为所有 HTML 输入元素指定一个名称，因为没有名称就无法识别该元素。如果单选按钮已被选中，我们要设置一个值并将该值发送到服务器。

让我们通过一个示例来讨论这个问题，如下所示。

<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 项目的命令。

ng new project

我们将使用这些命令安装 hammer.js。

npm install --save hammerjs

现在，我们可以使用如下所示的命令安装 Angular 材质。

npm install --save @angular/material

现在，我们可以使用如下所示的命令安装 Angular 动画。

npm install --save @angular/animations

我们可以使用下面显示的命令安装 Angular CDK。

npm install --save @angular/cdk

我们可以在 angular.json 文件中包含 hammerjs。我们可以在项目的根目录下找到该文件。

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

现在，让我们创建一组单选按钮并尝试获取所选单选按钮的值。首先，我们将在 app.module.ts 中导入 FormsModule 和 ReactiveFormsModule，如下所示。

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 文件中创建前端，如下所示。

<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 文件，更新后的代码如下所示。

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);
  }
}

输出：