choo form component example

form.js

const getFormData = require('get-form-data')
const html = require('choo/html')

module.exports = function formComponent (opts) {
  return `
    <form>
      <input name="woof" type="text" placeholder="type here"
        value=${opts.values.woof} oninput=${onInput}>
      <input type="submit" onsubmit=${onSubmit}>
    </form>
  `

  function onInput (e) {
    const data = e.value
    opts.onInput && opts.onInput(data) // allows onInput callback to be optional
  }

  function onSubmit (e) {
    const data = getFormData(e.target)
    opts.onSubmit && opts.onSubmit(data)
    e.preventDefault() // not called if above lines throw error, degrading to default form functionality
  }
}

view.js

const html = require('choo/html')
const Form = require('../components/form')

module.exports = function mainView (state, prev, send) {
  const form = Form({
    values: state.myFormModel,
    onInput: (data) => send('myFormModel:validate', data),
    onSubmit: (data) => send('myFormModel:submit', data)
  })

  return html`
    <main>
      ${form}
    </main>
  `
}