formToObject

Encode a set of form elements as an object.

Use the FormData constructor to convert the HTML form to FormData, Array.from() to convert to an array. Collect the object from the array, using Array.prototype.reduce().

typescript

interface IFormData {
  new (form: any): FormData;
}

const formToObject = (form: any) => {
  const F = FormData as IFormData;
  Array.from(new F(form)).reduce(
    (acc, [key, value]) => ({
      ...acc,
      [key]: value,
    }),
    {}
  );
};

<form id="form" name="form">
  <div>
    <label for="username">Enter name:</label>
    <input type="text" id="username" name="username" />
  </div>
  <div>
    <label for="email">Enter email:</label>
    <input type="text" id="email" name="email" />
  </div>
  <input type="submit" value="Submit!" />
</form>

typescript

formToObject(document.querySelector("#form")); // { email: 'test@email.com', username: 'Test Name' }