介绍Angular MDBootstrap 表单无线电组件

Angular MDBootstrap是一个基于Bootstrap的Angular组件库，可以为Angular应用程序提供丰富的UI元素。其中之一的表单无线电组件为表单中的复选框和单选按钮提供了美观易用的界面。

特性

• 可配置的样式和颜色
• 多种布局选项
• 可通过HTML表单提供值的支持

安装

要使用Angular MDBootstrap表单无线电组件，您需要先安装MDBootstrap和包含Angular适配器的MDBootstrap。

npm install --save mdb-ui-kit
npm install --save mdb-angular-ui-kit

然后您可以在Angular应用程序中导入所需的模块。

import { NgModule } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { MDBBootstrapModule } from 'mdb-angular-ui-kit';
// ...
@NgModule({
  imports: [
    MDBBootstrapModule.forRoot(),
    MDBBootstrapModule.forRoot(),
    // ..
  ],
  // ...
})
export class AppModule { }

用法

要使用Angular MDBootstrap表单无线电组件，您需要使用mdb-radio或mdb-checkbox指令并传递选项配置。

<label>mdb-radio:</label>
<div class="mdb-radio">
  <input type="radio"
         id="radio1"
         name="radio"
         class="form-check-input"
         mdbRadio
         [mdbRadioGroup]="radioGroup"
         [value]="'option1'"
         [(ngModel)]="radioOption"/>
  <label class="form-check-label" for="radio1">Option 1</label>

  <input type="radio"
         id="radio2"
         name="radio"
         class="form-check-input"
         mdbRadio
         [mdbRadioGroup]="radioGroup"
         [value]="'option2'"
         [(ngModel)]="radioOption"/>
  <label class="form-check-label" for="radio2">Option 2</label>
</div>
<p>Selected option: {{radioOption}}</p>

<label>mdb-checkbox:</label>
<div class="form-check">
  <input type="checkbox"
         id="checkbox1"
         name="checkbox"
         class="form-check-input"
         mdbCheckbox
         [(ngModel)]="checkboxOption"/>
  <label class="form-check-label" for="checkbox1">Option 1</label>
</div>
<p>Selected option: {{checkboxOption}}</p>

可以使用以下属性来自定义外观和行为：

• color: 复选框/单选按钮的颜色。可选值为： 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'white' | 'link'
• type: 复选框/单选按钮的类型。可选值为：'checkbox' | 'radio'
• inline: 复选框/单选按钮是否应显示为水平。可选值为：true | false

结论

Angular MDBootstrap表单无线电组件是一种快速轻松地为Angular应用程序添加美观实用的复选框和单选按钮的方法。 它提供了配置选项以使其功能齐全，并且可以与Angular表单集成，实现“out-of-the-box”数据绑定。