Получить входные значения из динамически генерируемой формы HTMLElement?

Question

В настоящее время я работаю над проектом Angular (я начинающий), и я создал функцию для создания формы HTML в зависимости от содержимого JSON (форма затем позволяет мне sh новые данные в 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