Listen and update form data on change.

HTML

<script
      type="module"
      src="https://cdn.jsdelivr.net/npm/ograf-form/dist/main.js"
    ></script>
    <!-- <script type="module" src="/dist/main.js"></script> -->

    <div id="form-container" style="width: 100vw">
      <superflytv-ograf-form
        id="ograf-form"
        schema='{"type":"object","properties":{"name":{"type":"string","gddType":"single-line","default":"John Doe","description":"This is the name of the thing"}}}'
      ></superflytv-ograf-form>
    </div>
    <div id="data" style="white-space: pre"></div>

JavaScript

// Listen to changes:
      const form = document.getElementById("ograf-form");
      const dataDiv = document.getElementById("data");
      form.addEventListener("change", (e) => {
        console.log("Caught change event", e.target.value);
        // The change event is fired when a user changes a value in the form
        // It does NOT fire on each key stroke.
        // This is a good time to update our data object:
        dataDiv.innerHTML = JSON.stringify(e.target.value, null, 2);
      });
      form.addEventListener("keyup", (e) => {
        console.log("Caught keyup event", e.target.value);
      });