Our first contextual form

In this video we'll make a basic form using a contextual component. Our form component will yield out a label, input, and submit button.

We can use our component like this:

{{#ui-form as |form|}}

  {{#form.label}}
    my label
  {{/form.label}}

  {{form.input placeholder="my input"}}

  {{#form.submit}}
    save
  {{/form.submit}}

{{/ui-form}}

Having the form be a contextual component lets us work at a higher level of abstraction than the standard html <form> tag. This unlocks a few benefits:

• It allows us to control the styling of each form element. Developers do not need to be concerned with styling their forms. Instead, they know if they use {{form.submit}} they'll get a submit button that matches their application's designs.
• It allows us to pre-wire our form components with complicated logic, such as a drop down that auto completes. The logic for such an element is encapsulated inside of the contextual component, so users of the form don't need to worry about wiring up complicated behavior.
• It lets us define the implicit relationships between form element. There are many implicit relationships between all of the elements within a form. For example, a button's disabled state might depend on a input field's validation state. A contextual form gives us a place to define these relationships.

Here's the form component that we end up with at the end of this video:

{{yield (hash
  label=(component 'ui-form/label')
  input=(component 'ui-form/input')
  submit=(component 'ui-button')
)}}