时间戳

首页 > 解决方案 > 如何使用 Vanilla JavaScript 从 Angular 11 Form 中的选定单选按钮中获取值

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

问题描述

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

“HTMLElement”类型上不存在“已检查”属性。

浏览器： Mac 浏览器视图

TS： 登录.component.ts

HTML： 登录.component.html

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

标签： angulartypescriptangular11

解决方案

和

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);
}

推荐阅读