<script type="module">
  import '@webhelpers/formula/webcomponent';

  const formulaEl = document.querySelector('formula-form') as HTMLElement;
  const url = formulaEl.formEl.getAttribute('action');

  // You can subscribe to form value changes and use these to do things
  // like form enrichment such as password stength
  formulaEl.addEventListener('form:values', (e) => {
    // An example of password strength and confirm
      const { password, password_confirm } = e.detail;
      const stength = getPasswordStr(password);
      const passwordsMatch = password === password_confirm;
      passwordMeter.value = strength;
      if (!passwordsMatch) {
        document.querySelector('#password_confirm ~ .error').innerHtml = 'Your password confirm does not match the password'
      }
  });

  // With this you can listen for errors and use this to update the UI
  // however it is better to use CSS properties for display - e.g
  // input:invalid ~ .error { display: block }
  formulaEl.addEventListener('form:errors', (e) => {
    cosnt totalErrors = Object.values(e.detail).reduce((a, b) => a + b.valid ? 0 : 1, 0);
    document.querySelector('#totalErrors').innerHtml = totalErrors;

    Object.entries(e.detail).forEach(([key, value]) => {
      const errorEl = document.querySelector(`#${key} ~ .error`);
      if (errorEl) {
        errorEl.innerHTML = value.message;
      }
    });
  })

  // You can also capture a form submit by adding the `handle-submit`
  // to the `<formula-form>` component and then subscribe to the
  // `form:submit` event
  formulaEl.addEventListener('form:submit', async (e) => {
    const result = await fetch(url, {method: post, body: e.detail});
    // Rest of code goes here
  })
</script>

<formula-form handle-submit>
  <form id="customer-form" method="POST" action="/customer/manage">
    <div>
      <label for="userName">User Name</label>
      <input id="userName" name="username" type="text" required max="20" />
      <span class="error"></span>
    </div>
    <div>
      <label for="password">Password</label>
      <input id="password" name="password" type="password" required min="8" />
      <span class="error"></span>
    </div>
    <div>
      <label for="password_match">Password Match</label>
      <input id="password_match" name="password_match" type="password" required min="8" />
      <span class="error"></span>
    </div>
    <button type="submit">Sign Up</button>
  </form>
</formula-form>