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

【问题标题】：How to get value from selected radio button from Angular 11 Form using Vanilla JavaScript如何使用 Vanilla JavaScript 从 Angular 11 Form 中的选定单选按钮中获取值
【发布时间】：2020-12-17 14:37:18
【问题描述】：

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

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

浏览器：

TS：

HTML：

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

【问题讨论】：

标签： angular typescript angular11

【解决方案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);
}

【讨论】：

解决了这个问题。谢谢！
没问题 Azhya - 很高兴我能帮上忙！ =)