如何使用 Vanilla JavaScript 从 Angular 11 Form 中的选定单选按钮获取值

Question

因此，每当我提交 Bootstrap-based 表单时，我都会尝试捕获单选按钮的值。我曾尝试使用 vanilla JavaScript 在我的 component.ts 文件中提取此值，但在 VSCode 中出现编译错误：

Property 'checked' does not exist on type 'HTMLElement'.

浏览器：

TS:

HTML:

如何在表单中获取此单选按钮的值？我是 Angular 的新手，所以到目前为止我一直在避免使用 ngModel，因为我不确定这是否需要我在 TS 文件中设置一个新的属性或向该 TS 文件添加另一个导入.感谢您对此功能的任何帮助。

Answer 1

有

const roles = document.getElementsByName("role") as NodeListOf<HTMLElement>;

您将返回的节点严格键入为 HTMLElement 类型。然而，单选按钮的类型为 HTMLInputElement，因此它会正确抛出错误，因为 HTMLElement 没有 .checked 属性.

将行更改为：

const roles = document.getElementsByName("role") as NodeListOf<HTMLInputElement>;

您可以使用现有的 for 循环遍历节点并使用 .value 属性.

获取节点值

例如

for (var i = 0; i < roles.length; i++) {
  let ele = roles[i];
  console.log(ele.value);
}

How to get value from selected radio button from Angular 11 Form using Vanilla JavaScript