如何从打字稿中的多个输入字段中获取值？答案

【问题标题】：How to fetch values from multiple input fields in typescript?如何从打字稿中的多个输入字段中获取值？
【发布时间】：2021-11-19 10:33:17
【问题描述】：

我有一些动态生成的输入字段。我想在单击按钮时获取输入字段中输入的文本。

e.value的控制台日志是：

NodeList [input.criteria-box]

0: input.criteria-box

长度：1

想要的是获取输入字段的值。

const criteria_elems = document.getElementsByName('criteria-field');
criteria_elems.forEach((e) => {
    console.log(e.value); // Property 'value' does not exist on type 'HTMLElement'.ts(2339)
})

<input type="text" class="criteria-box" name="criteria-field" placeholder="Enter Criteria" required /><br>
<input type="text" class="criteria-box" name="criteria-field" placeholder="Enter Criteria" required /><br>
<input type="text" class="criteria-box" name="criteria-field" placeholder="Enter Criteria" required /><br>
<input type="text" class="criteria-box" name="criteria-field" placeholder="Enter Criteria" required /><br>
<input type="text" class="criteria-box" name="criteria-field" placeholder="Enter Criteria" required />

首先生成输入字段，然后用户可以在这些字段中输入数据并单击按钮。

此时每个字段中输入的数据将使用某种循环逻辑左右来获取。关于如何在循环中获取值的任何想法？

【问题讨论】：

你什么时候执行上面的代码？您需要在用户有机会用一些值填充字段之后执行此操作，目前看起来您正在执行此操作之前/就在页面加载时...？
实际上您的代码运行良好，只需注意 CBroe 提到的，您需要在加载输入并填充一些值后调用此代码。但是，问题是：为什么不使用 Reactive Forms 或 ngModel？如果应用程序是使用 Angular 实现的（如您的标签所建议的那样），这将是更标准的方式。

标签： javascript html angular typescript

【解决方案1】：

理想情况下，您应该使用reactive form 组来执行此类任务。您可以为动态输入元素创建一个form array，然后您可以轻松地从该表单数组中获取值。

不过，要暂时解决您的问题，请像这样修改您的代码：

criteria_elems.forEach((e: HTMLInputElement) => {
    console.log(e.value);
})

要修复编译错误，我们需要将HTMLInputElement 指定为我们正在迭代的每个元素的类型。

【讨论】：

这种方法让我获得了价值。如前所述，我将尝试包含反应形式和解决方法。

【解决方案2】：

你可以使用

document.querySelectorAll(".criteria-box");

应该返回与类名 .criteria-box 匹配的所有元素的数组

否则，我建议将所有字段包装到单个表单标签中，并在提交事件时处理表单数据。该解决方案将更无错误，并允许您在单个表单中处理数据，而不是跨整个网站。

【讨论】：