从动态生成的 HTML 元素表单中检索输入值？

Question

我目前在一个 Angular 项目中（我是初学者），我创建了一个函数来根据 JSON 的内容创建一个 HTML 表单（然后该表单允许我在 JSON 中推送新数据）。它可以工作，显示表单，但我没有提前考虑，也不知道如何从用户那里检索输入值。

 createNewLineForm() {
    if (this.allowForm) {
      let indiceList = 0;
      this.formOn = true;

      for (let jsonCol of this.columnData) {

        if (jsonCol.visible === true && jsonCol.type === "Boolean") {

          var content = document.getElementById("formcontent");

          var listTitle = document.createElement("header");
          listTitle.textContent = jsonCol.name;

          content.appendChild(listTitle);

          var selectList = document.createElement("select");
          selectList.id = "trueFalse";

          content.appendChild(selectList);

          var option = document.createElement("option");
          option.value = "true";
          option.text = "true";

          selectList.appendChild(option);

          var option2 = document.createElement("option");
          option2.value = "false";
          option2.text = "false";

          selectList.appendChild(option2)
        }

        if (jsonCol.visible === true && jsonCol.type === "String" && jsonCol.dropdownList === null) {

          var content = document.getElementById("formcontent");

          var inputTitle = document.createElement("header");
          inputTitle.textContent = jsonCol.name;


          content.appendChild(inputTitle);

          var formInput = document.createElement("input");
          formInput.type = "text";
          formInput.placeholder = jsonCol.name;
          formInput.name = "text";

          content.appendChild(formInput);

        }

        if (jsonCol.visible === true && jsonCol.type === "String" && jsonCol.dropdownList != null) {

          var content = document.getElementById("formcontent");

          var listTitle = document.createElement("header");
          listTitle.textContent = jsonCol.name;

          content.appendChild(listTitle);

          var selectListLong = document.createElement("select");
          selectListLong.name ="longList";

          indiceList++;

          content.appendChild(selectListLong);


          for (const options of jsonCol.dropdownList) {

            var option = document.createElement("option");
            option.value = options;
            option.text = options;

            selectListLong.appendChild(option);

          }
        }
      }
      var submit = document.createElement("input");
      submit.type = "submit";
      content.appendChild(submit);
    }
  }

然后在我的 HTML 窗口中使用简单的<div id="formcontent"> </div> 有条件地调用它

我尝试使用 document.getElementByName('...').value，似乎不起作用。

顺便说一句，如果您对如何制作该表格有其他想法，我也想听听，我认为这种方法似乎有点混乱。

Answer 1

var content = document.getElementById("formcontent").value;

你可以通过ID试试