如何從 typescript 中的多個輸入字段中獲取值？

Question

我有一些動態生成的輸入字段。 我想在單擊按鈕時獲取在輸入字段中輸入的文本。

e.value 的控制台日志是：

節點列表 [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 />

輸入字段首先生成，然后用戶可以在這些字段中輸入數據並單擊按鈕。

此時，每個字段中輸入的數據將使用某種循環邏輯來獲取。 關於如何在循環中獲取值的任何想法？

Answer 1

理想情況下，您應該為此類任務使用反應式表單組。 您可以為動態輸入元素創建一個表單數組，然后您可以輕松地從該表單數組中獲取值。

盡管如此，要暫時解決您的問題，請像這樣修改您的代碼：

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

要修復編譯錯誤，我們需要將HTMLInputElement指定為我們正在迭代的每個元素的類型。

Answer 2

您可以使用

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

那應該返回匹配 class name.criteria-box 的所有元素的數組

否則，我建議將所有字段包裝到單個表單標記中，並在提交事件時處理表單數據。 該解決方案將更無錯誤，並允許您在單個表單中處理數據，而不是在整個網站上。