Skip to content

Example of ember-form-for and mirage server side validation

At the time of writing, ember-form-for is the top Ember.js plugin for forms on Ember Observer. It provides a straightforward way to display form fields without having to write all the boilerplate HTML code around it.

What you do is you take:



    <label>First name: {{input value=model.firstname}}</label>
    {{#each model.errors.firstname as |error|}}
      <span class="errors">{{error.message}}</span>
    {{/each}}

and replace it with form-for-model helper:

{{#form-for model as |f|}}
  {{f.text-field "firstname"}}

  .. // other fields and submit button
{{/form-for}}

It will generate HTML code for you, as well as display validation errors.

Complete form becomes much more readable this way:

{{#form-for model as |f|}}
  {{f.text-field "firstname"}}
  {{f.text-field "lastname"}}

  {{f.select-field "gender" "unknown male female"}}
  {{f.checkbox-field "terms" label="I agree to the Terms of Service"}}

  {{f.submit "Submit"}}
{{/form-for}}

I’ve created a dedicated Github branch ember-form-for, that you can experiment with:
https://github.com/ember-examples/server-side-validation-mirage/tree/ember-form-for

— Ember.js