角度如何检查单选框

在角度中，可以使用 [(ngModel)] 或者 [(ngFormControl)] 对单选框进行双向数据绑定。但有时候，我们需要在组件中检查单选框的选中状态，本篇将介绍如何使用 @ViewChild 和 ElementRef 来获取单选框的选中状态。

步骤

1. 在模板中给每个单选框添加一个标识符，例如 #radio1，我们可以通过这个标识符来在组件中引用这个单选框。

<input type="radio" name="radio-group" value="option1" #radio1> Option 1
<input type="radio" name="radio-group" value="option2" #radio2> Option 2

2. 在组件中使用 @ViewChild 和 ElementRef 来获取单选框元素。

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-radio-example',
  template: `
    <p>
      <input type="radio" name="radio-group" value="option1" #radio1> Option 1
      <input type="radio" name="radio-group" value="option2" #radio2> Option 2
    </p>
  `,
})
export class RadioExampleComponent {
  @ViewChild('radio1') radio1: ElementRef<HTMLInputElement>;
  @ViewChild('radio2') radio2: ElementRef<HTMLInputElement>;

  constructor() {}

  ngAfterViewInit() {
    console.log(this.radio1.nativeElement.checked); // false
    console.log(this.radio2.nativeElement.checked); // false
  }
}

通过 ElementRef<HTMLInputElement> 指定元素类型为 HTMLInputElement，然后可以通过 nativeElement.checked 获取单选框的选中状态。

总结

在 Angular 中，通过 @ViewChild 和 ElementRef 可以方便地获取单选框的选中状态。除了单选框之外，对于复选框等其他表单元素，也可以使用类似的方法来获取元素状态。