Save Time And Be A Better Dev With This Ember Forms Add-on

It will help you minimize the number of errors, shorten the time you spend on coding and will make the whole process of filling in forms a lot easier.

Problem

Even though Ember.js makes it pretty easy to create inputs, if you want features like validation or support for bootstrap-style markup, things can get a little more complicated. I decided to build an add-on that uses modern Ember concepts like one-way data-binding and composability to handle all of these things for you.

What does our Ember forms add-on do?

ember-legit-forms provides a set of components to make dealing with forms in Ember.js a pleasant experience. It provides components for text inputs, selection fields and text-areas, as well as making it easy to validate entire forms. All of the components use one-way data-binding, which means that it's pretty easy to reason about the flow of data in your forms.

Validators are simple JavaScript objects and creating new ones is a breeze. It also works out-of-the-box with Twitter Bootstrap, and you can customize it to work with other CSS frameworks like Foundation.

How to get started?

Getting started is as easy as running ember install ember-legit-forms inside your Ember project. Then you need to define a rules object in your component/controller and pass it to the lf-form component:

[code]

Note that the name attribute corresponds to the key in the rules hash. As a result you get an input that looks like this:

You can find more in-depth explanations and examples in the documentation.

Process

The first hurdle was child-parent communication. Every time the user provided input, the form needs to determine whether it’s valid or not. Since all of our data is flowing down, yielded closure actions was the way to go. What I ended up with was yielding a closure action that validates input and notifies the form object about the valid state - something like this:

{ { #lf-form rules=rules as |validate| } }
{ { /lf-form } }

Child components can then use validate to check whether the input is correct and change the form and input state accordingly, e.g.:

const { isValid, messages } = this.attrs.validate(name, value);

I also wanted users to be in control of their forms, which meant that it had to be possible to provide custom label and error components. As a result you can easily provide your own errorMessagesComponent and labelComponent like so:

{ { lf-input
labelComponent="my-own-label-component"
  errorMessagesComponent="my-own-error-messages-component"
} }

You can also easily customize input wrapper markup (by default it uses Twitter Bootstrap’s markup) by extending the lf-input-wrapper component.

Another key thing was making creation of new validators as painless as possible. To add a new one, you can just create a new file in your app/validators directory and define the validator:

[code]

In the above example we can see an implementation of the required validation rule.

Result

All in all, the development took about 3 months from start to production-ready state, however the development is still underway. If you’ve enjoyed using this add-on, please let us know in the comment section below!

Key facts

• 60 working days
• 100 cups of coffee
• 114 commits
• 14 releases