Published on Jun 10, 2014

ember-easyForm makes forms... easier! I'll show you how to get the plugin into your ember-cli app and then customize how your forms look.




Hey, welcome back! Today, we're going to be talking about Ember EasyForm and how to use it in your project.

The official documentation recommends that you download one of their builds and then include it manually. However, you can also install it via Bower. The Bower package that we'll have to install is called ember-easyForm-shim. Then, we'll include it in our Brocfile right here.

This is the code that we're going to be replacing with Ember EasyForm. However, if you'll look at this code, you'll notice a few problems with it. It's just an input component inside a paragraph tag. If you want to style this, it's going to be very hard. It's also not semantic, so the functionality that we'll be replacing will be much more than this. It will be more like this, having a label and a surrounding class. We're going to get the usefulness of this more verbose code, but with conciseness of what we had before. And it's actually going to be even more concise.

We start with a form-for component. The only thing that it requires is a model, an object that it can use. Here, we're handing it the post since that is being passed into the post form component. However, oftentimes this will be model or controller instead of post. The syntax for creating a line is extremely simple. Input and then the name of the variable. We'll take that and use it to attach the value. The value before was post.title and here it's taking it from post, and grabbing title from that. It will also create a label based on the name of the variable you give it, and then it will discover the type based on the Ember data type of that variable.

Let's put the rest of the fields in there. These top three are regular strings whereas this bottom one, it's going to be a longer string, so we want the text area instead of just the text box, so we have to do as='text'. That will tell Ember EasyForm to use the text area. Finally, we'll add back in our button.

It's just like it was before. If you go to the browser, you'll see that we have our form, just like before. And here's our form and here is the div that wraps the title, you can see right here we have a label, then an input. That is working just like we want it to. We only had to write a tiny bit of code and we're getting a lot of markup that could be useful.

If we wanted to style it, there's a few ways we could go about it. We could see that it puts an input class on all of them and it puts a string class on all of them because those are all strings. Then it puts a class based on the variable that we gave it.

Let's say we wanted to customize the classes that are on these forms. We could put it right here and that would put it on the outer div right here. If you want to customize it even more, you can make the input helper into a block. Here, we've made it so it has a block, and this block happens to recreate what it would normally create otherwise. However, you can put in options here as well as change up the ordering and put in custom markup.

There are a lot more cool things you can do to customize ember-easyForm, including making a custom input type and creating a wrapper so you can create different sets of styling for different forms.

If you'd like me to tackle one of those two customizations, or if you'd like to suggest another topic entirely, tell me on Twitter. I am @JeffreyBiles. Until next time, happy coding!

Subscribe to our mailing list