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:

<p>    &lt;label&gt;First name: {{input value=model.firstname}}&lt;/label&gt;<br />
    {{#each model.errors.firstname as |error|}}<br />
      &lt;span class=&quot;errors&quot;&gt;{{error.message}}&lt;/span&gt;<br />

and replace it with form-for-model helper:

<br />
{{#form-for model as |f|}}<br />
  {{f.text-field &quot;firstname&quot;}}</p>
<p>  .. // other fields and submit button<br />
{{/form-for}}<br />

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

Complete form becomes much more readable this way:

<br />
{{#form-for model as |f|}}<br />
  {{f.text-field &quot;firstname&quot;}}<br />
  {{f.text-field &quot;lastname&quot;}}</p>
<p>  {{f.select-field &quot;gender&quot; &quot;unknown male female&quot;}}<br />
  {{f.checkbox-field &quot;terms&quot; label=&quot;I agree to the Terms of Service&quot;}}</p>
<p>  {{f.submit &quot;Submit&quot;}}<br />
{{/form-for}}<br />

I’ve created a dedicated Github branch ember-form-for, that you can experiment with: