如何在Angular中检查复选框的值 - Javascript

在Angular中，我们可以使用模板驱动表单或响应式表单来创建表单。对于复选框，我们可以使用[(ngModel)]双向绑定来获取复选框的值。

模板驱动表单

HTML代码

<form #myForm="ngForm">
  // ...
  <input type="checkbox" name="myCheckbox" [(ngModel)]="isChecked">
  <label for="myCheckbox">Check me</label>
  // ...
</form>

组件代码

export class MyComponent {
  isChecked = false;

  onSubmit() {
    console.log(this.isChecked);
  }
}

在组件代码中，我们可以直接访问isChecked来获取复选框的值。在表单中提交时，您可以在onSubmit()方法中处理复选框的值。

响应式表单

HTML代码

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  // ...
  <input type="checkbox" formControlName="myCheckbox">
  <label for="myCheckbox">Check me</label>
  // ...
</form>

组件代码

export class MyComponent {
  myForm = this.formBuilder.group({
    myCheckbox: [false]
  });

  onSubmit() {
    console.log(this.myForm.value.myCheckbox);
  }
}

在响应式表单中，我们使用formControlName指定表单控件的名称并使用FormGroup创建一个表单组。在组件代码中，我们可以使用myForm.value.myCheckbox来获取复选框的值。在表单中提交时，您可以在onSubmit()方法中处理复选框的值。

以上是在Angular中检查复选框值的两个示例。无论您使用的是模板驱动表单还是响应式表单，获取复选框的值都是相似的，只需要简单的代码即可完成。