Using form providers

Provider components (also called renderless or data-provider components) are components that only yield data, and render no UI.

Providers can be used in many situations, including building forms. The provider yields out data and actions that the presenting component can use to construct a working form. By separating the behavior of the form's logic from its presentation, callers can present the form's data, fields and errors in whatever way they need.

Using providers increases the flexibility of your components, but also pushes more responsibility out onto callers. When building forms, it's best to start with a single component that's responsible for both the behavior and presentation, and only refactor to a form provider when the behavior needs to be shared.

{{! Coupled form component }}
{{#user-signin-form
  buttonText="Create account"
  buttonSubmittingText="Creating..."
  signupSource="plan"
  signupMeta=(hash planId=model.id)
as |section|}}

{{! Provider + presenter }}
{{#user-signin-form-provider as |p|}}

  {{#ui-form submitTask=p.tasks.signin}}
    {{#ui-p}}
      Enter your email to sign in.
    {{/ui-p}}

    {{ui-input value=p.user.email}}

    {{#ui-button disabled=p.tasks.signin.isRunning}}
      Sign in
    {{/ui-button}}
  {{/ui-form}}

{{/user-signin-form-provider}}