极客笔记Angular Material 7 – CheckBox
在 Angular 中，我们常常需要使用到复选框（CheckBox）组件，用于实现用户对多个选项进行选择。 Angular Material 7 中提供了丰富的复选框组件，可以方便地满足我们的需求。
创建一个简单的 CheckBox
首先，我们需要导入 Angular Material 中提供的 CheckBox 模块，以便我们可以直接在 HTML 中使用复选框组件。在 app.module.ts 中添加以下代码：
import { MatCheckboxModule } from '@angular/material';
@NgModule({
...
imports: [
...
MatCheckboxModule
],
})
export class AppModule { }
接下来，在需要使用 CheckBox 的组件的 HTML 中添加以下代码：
<mat-checkbox>选项1</mat-checkbox>
这里的 mat-checkbox 就是 Angular Material 提供的复选框组件。在这个组件内部，我们可以添加标签文本，作为此选项的名称。运行应用程序，您将能够在页面中看到一个简单的 CheckBox。
如何检查 CheckBox 的值
一旦用户在复选框中选择了选项，我们常常需要在代码中检查它是否被选中。我们可以通过与 [(ngModel)] 双向绑定来方便地获取 CheckBox 的值。在 HTML 中，我们可以添加以下代码：
<mat-checkbox [(ngModel)]="selectedOption">选项1</mat-checkbox>
这里的 selectedOption 是一个定义在 TypeScript 中的变量。在 TypeScript 中，我们可以添加以下代码：
selectedOption = false;
checkSelection() {
console.log('当前值是：' + this.selectedOption);
}
在这个代码中，我们定义了一个名为 selectedOption 的变量，并将其初始化为 false。我们还定义了一个名为 checkSelection 的函数，在控制台中输出当前选中的值。
CheckBox 的属性和事件
Angular Material 提供了许多复选框组件的属性和事件，可以帮助我们根据我们的需要自定义复选框组件。以下是一些常用的属性和事件：
aria-label
aria-label 属性允许我们设置复选框的屏幕阅读器文本。
<mat-checkbox aria-label="这是一个示例">选项1</mat-checkbox>
Checkbox Properties
对于一个 CheckBox，Angular Material 提供了一些属性，我们可以直接在 HTML 中进行设置：
checked: 指定是否选中。indeterminate: 指定该复选框是否显示为不定状态。disabled: 指定该复选框是否禁用。
<mat-checkbox [checked]="true" [indeterminate]="false" [disabled]="false">选项1</mat-checkbox>
Checkbox Events
Angular Material 还为 CheckBox 提供了一些事件，以便我们可以在用户选择或取消选择时执行相应的操作：
change: 当 CheckBox 的选中状态更改时触发。indeterminateChange: 当 CheckBox 的不定状态更改时触发。click: 当用户单击 CheckBox 时触发。
<mat-checkbox (change)="onSelectionChange()">选项1</mat-checkbox>
在 TypeScript 中，我们可以通过以下方式响应 change 事件：
onSelectionChange() {
if (this.selectedOption) {
console.log('选项已选中');
} else {
console.log('选项已取消');
}
}
实现多选 CheckBox
有时，我们需要允许用户选择多个选项。 Angular Material 为此提供了 mat-checkbox-group 组件，以便我们可以更轻松地实现这一功能。
首先，我们需要导入 MatCheckboxModule 和 MatCheckboxGroupModule 至 app.module.ts 中：
import { MatCheckboxModule, MatCheckboxGroupModule } from '@angular/material';
@NgModule({
...
imports: [
...
MatCheckboxModule, MatCheckboxGroupModule
],
接下来，在需要使用 `mat-checkbox-group` 的 HTML 中添加以下代码：
```html
<mat-checkbox-group [(ngModel)]="selectedOptions">
<mat-checkbox value="option1">选项1</mat-checkbox>
<mat-checkbox value="option2">选项2</mat-checkbox>
<mat-checkbox value="option3">选项3</mat-checkbox>
</mat-checkbox-group>
这里的 selectedOptions 是一个定义在 TypeScript 中的变量，用于存储用户选择的选项。在 TypeScript 中，我们可以添加以下代码：
selectedOptions = [];
checkSelection() {
console.log('当前选中的是：' + this.selectedOptions.join(', '));
}
在这个代码中，我们定义了一个名为 selectedOptions 的变量，并将其初始化为空数组。我们还定义了一个名叫 checkSelection 的函数，在控制台中输出用户选择的选项名称。
在表单中使用 CheckBox
在表单中使用 CheckBox 能够实现更高效的用户输入。 Angular 表单提供了 ngModel 双向数据绑定，以及一些验证机制，可以帮助我们验证用户输入的正确性。
以下是一个简单的示例：
<form #form="ngForm" (submit)="onSubmit(form)">
<mat-checkbox [(ngModel)]="selectedOption" name="option1">选项1</mat-checkbox>
<button type="submit" [disabled]="!form.valid">提交</button>
</form>
在 TypeScript 中，我们可以添加以下代码：
selectedOption = false;
onSubmit(form: NgForm) {
console.log('提交值: ', form.value);
}
这里的 NgForm 是 Angular 提供的表单对象，在这里我们将表单绑定到 onSubmit 函数中，以便我们可以轻松地获取 CheckBox 的值。
结论
在本文中，我们探讨了如何使用 Angular Material 7 中提供的复选框组件来实现 CheckBox 功能，并解释了如何获取 CheckBox 的值，以及如何添加属性和事件。我们还研究了如何实现手动选择多个选项并将其绑定到表单中。使用 Angular Material 7，我们可以轻松地为每个应用程序添加 CheckBox 功能。