ember-paper provides a paper-form to help you build forms and keep track of the form's global validity state. This component uses the html form tag by default, so expected form behavior will occur. (For example, pressing the enter key from within one of the form's inputs will submit the form.) paper-form yields paper-input, paper-select and paper-autocomplete controls. In the following example you can see how we use the yielded form controls:

Template

<PaperForm @onSubmit={{action "basicSubmitAction"}} as |form|>
  <div class="layout-row">
    <div class="layout-column flex-50">
      <form.input @label="First Name" @value={{this.firstName}} @onChange={{action (mut this.firstName)}} @required={{true}} />
      <form.input @label="Last Name" @value={{this.lastName}} @onChange={{action (mut this.lastName)}} />
    </div>
    <div class="layout-column flex-50">
      <form.autocomplete @required={{true}} @options={{this.items}} @selected={{this.selectedCountry}} @searchField="name" @labelPath="name" @label="Country" @noMatchesMessage="Oops this country doesn't exist." @onSelectionChange={{action (mut this.selectedCountry)}} as |country select|>
        <PaperAutocompleteHighlight @label={{country.name}} @searchText={{select.searchText}} @flags="i" />
      </form.autocomplete>
      <form.input @type="number" @label="Age" @value={{this.age}} @onChange={{action (mut this.age)}} @min={{13}} @max={{65}} @required={{true}} />
    </div>
  </div>
  <div class="layout-row">
    <form.submit-button @raised={{true}} @primary={{true}}>Submit</form.submit-button>
  </div>
</PaperForm>

A typical use case for the global validity state is to toggle the submit button between a disabled and enabled state. Here is how you would do that with paper-form:

Template

<PaperForm @onSubmit={{action "disabledSubmitAction"}} as |form|>
  <div class="layout-row">
    <form.input @label="Favorite Letter" @value={{this.favoriteLetter}} @onChange={{action (mut this.favoriteLetter)}} @required={{true}} @maxlength={{1}} />
  </div>
  <div class="layout-row">
    <form.submit-button @raised={{true}} @primary={{true}} @disabled={{form.isInvalid}}>
      Submit
    </form.submit-button>
  </div>
</PaperForm>

If you prefer, you can trigger the submit action without using a submit button. paper-form also yields an onSubmit action you can use wherever you like, e.g:

          <button onclick={{action form.onSubmit}}>
            Submit
          </button>
        

You can also extend paper-input to make your own custom components (money inputs, phone inputs, etc.) and the form validation will still work out of the box! Just replace paper-input with your component's name.

Template

<PaperForm @onSubmit={{action "customSubmitAction"}} as |form|>
  <div class="layout-row">
    <PaperInput @label="Favorite Number" @value={{this.favoriteNumber}} @onChange={{action (mut this.favoriteNumber)}} @required={{true}} @min={{1}} @max={{10}} />
  </div>
  <div class="layout-row">
    <form.submit-button @raised={{true}} @primary={{true}}>Submit</form.submit-button>
  </div>
</PaperForm>