获取mat-checkbox - Angular材质的校验值

基础概念

mat-checkbox 是 Angular Material 库中的一个组件，用于创建复选框。Angular Material 是一套基于 Angular 的 UI 组件库，旨在提供现代化的、响应式的 UI 组件。

类型

mat-checkbox 主要有以下几种类型：

基本复选框：最简单的复选框形式。
带标签的复选框：复选框旁边带有文本标签。
禁用的复选框：无法被用户选择的复选框。

应用场景

mat-checkbox 可以用于以下场景：

表单中的多选选项。
设置页面中的功能开关。
数据筛选和排序。

获取校验值

在 Angular 中，可以通过表单控件来获取 mat-checkbox 的校验值。以下是一个示例代码：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-checkbox-form',
  templateUrl: './checkbox-form.component.html',
  styleUrls: ['./checkbox-form.component.css']
})
export class CheckboxFormComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      checkbox: ['', Validators.requiredTrue]
    });
  }

  onSubmit() {
    if (this.form.valid) {
      console.log('Checkbox is checked:', this.form.get('checkbox').value);
    } else {
      console.log('Checkbox is not checked');
    }
  }
}

在模板文件 checkbox-form.component.html 中：

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <mat-checkbox formControlName="checkbox">Check me</mat-checkbox>
  <button mat-raised-button color="primary" type="submit">Submit</button>
</form>