ember-spicy-forms

Helpers for universal form control.

Notes:

Goals:

integration with validation libraries
able to be given some object that knows how to persistent state (to maybe local storage in case of browser refresh, or computer crash)
can be given a pojo
provide helpers for decoupling UI from the from.
let the user decide when and how to validate?

Maybe Goals:

store history of change sets (would allow for undo)
multi stage forms?

API Ideas

<SpicyForm
  @onSubmit={{this.doTheSubmit}}
  @data={{this.somePojo}}
  @validator={{this.yupValidator}}
as |form|>
  {{#form.helpersFor 'firstName' as |firstName|}}

    {{#if firstName.hasError}}
      {{firstName.error}}
    {{/if}}

    <label for={{firstName.fieldId}}>First name</label>
    <input
      id={{firstName.fieldId}}
      value={{firstName.value}}
      {{on 'input' firstName.onInput}}
    >

  {{/form.helpersFor}}

  {{#form.helpersFor 'hasNotifications' as |hasNotifications|}}

    <label for={{hasNotifications.fieldId}}>Enable Notifications?</label>

    <input
      type='checkbox'
      id={{hasNotifications.fieldId}}
      checked={{hasNotifications.checked}}
      {{on 'change' (pipe
        this.requestPermission
        (hasNotifications.withChangeset (perform this.doWork))
      ) }}
    >

  {{/form.helpersFor}}
</SpicyForm>

Maybe if/when we get hash-splatting, "splashes"?:

<SpicyForm
  @onSubmit={{this.doTheSubmit}}
  @data={{this.somePojo}}
  @validator={{this.yupValidator}}
as |form|>
  {{#form.helpersFor 'firstName' as |firstName|}}

    {{#if firstName.hasError}}
      {{firstName.error}}
    {{/if}}

    <label for={{firstName.fieldId}}>First name</label>
    <input ...firstName.inputAttributes>

  {{/form.helpersFor}}

  {{#form.helpersFor 'hasNotifications' as |hasNotifications|}}

    <label for={{hasNotifications.fieldId}}>Enable Notifications?</label>
    <input type='checkbox' ...hasNotifications.inputAttributes>

  {{/form.helpersFor}}
</SpicyForm>