alternative API for handling controls

[jelhan]

This library looks very promising. Thanks a lot for working on it!

I'm not fully convinced by the public API for controls yet. Currently <form.Field> yields different build-in control components:

• input
• textarea
• checkbox
• radio group
• select

Custom controls needs to be used for everything else.

To use a custom control, <form.Field> and the control component needs to be wired manually. This prevents community from building reusable controls to integrate other libraries with ember-headless-form. It seems custom controls were a second thought when designing the API.

I like to propose an alternative API for controls. Let me illustrate it using first-class component template syntax:

import { Input, Textarea } from 'ember-headless-form/controls';
import { PowerSelectMultiple } from 'ember-headless-form-power-select';
import pickaday from 'ember-pickaday/modifiers/pickaday';

<template>
  <HeadlessForm as |form|>
    <form.Field @name='title' @control={{Input}} as |field|>
      <field.Label>Title</field.Label>
      <field.Control />
    </form.Field>

    <form.Field @name='body' @control={{Textarea}} as |field|>
      <field.Label>Body</field.Label>
      <field.Control />
    </form.Field>

    <form.Field @name='tags' @control={{PowerSelectMultiple}} as |field|>
      <field.Label>Body</field.Label>
      <field.Control  />
    </form.Field>

    <form.Field @name='date' as |field|>
      <field.Label>Date</field.Label>
      <input
        id={{field.id}}
        {{pikaday
          format='DD.MM.YYYY'
          value=field.value
          onSelect=field.setValue
        }}
      />
    </form.Field>

    <button type='submit'>Submit</button>
  </HeadlessForm>
<template>