Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Introduction to angular-formly

5:43 Angular 1.x lesson by

angular-formly is a terrific abstraction on top of forms in Angular. This short introduction shows you how to get started with angular-formly.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

angular-formly is a terrific abstraction on top of forms in Angular. This short introduction shows you how to get started with angular-formly.

Avatar
Kent C.

Note: If you can't wait for more lessons to learn more, see this talk I did at ng-nl conference :-) https://www.youtube.com/watch?v=o90TMDL3OYc

Avatar
Kamal

oh man, I am so excited about this series! thanks so much for posting. I should have a project in the next couple of months where I can implement this. Working with forms is a pain and I'm hoping formly can help with this. i've already watched the first two vids just because i couldn't wait :-) thanks

Avatar
Kent C.

Great to hear! Let me know if you have any needs! :-)

In reply to Kamal
Avatar
kushal

Hi, I just watched lesson 1. Can you please review the code. I am not able to see any output on JS Bin specific to the formly form. Not even input fields are shown !

Avatar
Kent C.

Sorry, I'm on vacation and don't have my computer with me. I'll fix it when I return. Until then, try out the examples on the website: angular-formly.com or see the docs: docs.angular-formly.com

In reply to kushal
Avatar
Joel

Hi, I just watched lesson 1. Can you please review the code. I am not able to see any output on JS Bin specific to the formly form. Not even input fields are shown !

This required a specific version of apiCheck dependency to run. It was pointing at master, which was no longer compatible.

The JSBin should work now!

In reply to kushal
Avatar
Doug

Is there some guidance on how to integrate formly with angular-material? I don't mind the hard work of making it available to the community. I just don't know where to begin.

In reply to Kent C.
Avatar
Kent C.

Noticed your email on the mailing list. I'll respond to you there 👍

In reply to Doug

To use angular-formly, we first need to include angular-formly and its dependencies. angular-formly has two dependencies, angular, and a library called api-check, api-check is a Vanilla JS library, so, it can be added anywhere on a page, and it has no dependencies.

We'll bring in angular-formly, and angular-formly-templates-bootstrap. We are bringing this in as script tags, but all of these are available on npm or bower, so, pick your poison there. angular-formly is the core library, and it doesn't care anything about how templates look for specific fields. It just cares about managing which fields are being shown, and the different properties of these fields.

We have a library called angular-formly-templates-bootstrap, which provides the templates that we need for our specific implementation of formly. In our case, we are using bootstrap, and so, this angular-formly-templates-bootstrap will have the input fields, and site field set, that we need to use.

I should just say that, it is recommended that, if you are going to be very serious about creating forms in your application, with formly, that you create your own types, because it's very easy to do, but we'll just use the template library for now, because it accomplishes our purposes.

Let's look at the JavaScript, because angular-formly and the templates library, both expose a module that we need to depend on, if we want to use these libraries. We'll go into our module definition, and we'll depend on formly, and formly-bootstrap, and now, we have access to those modules, and are HTML. We are going to take this form, and rewrite it using formly. I'll just copy and paste these here, and we'll get rid of that field, because we are going to configure that via JavaScript.

You should see the submit button, we have that duplicated in both of these, that's OK. Formly isn't going to give you submit button, so, we'll just specify that ourselves. Now, we are going to say, formlyForm, that is the directive, that formly core library exposes to us, and we'll specify a model. If we look at the original, ng-model, here we are using vm.model the first name for this specific input.

We are going to pass in the whole model object itself, so that would be like a user model, an account, or something. We have our fields, we'll expose this on our controller under the fields property. That's our formlyForm. We can get rid of our HTML. We'll just use JavaScript from here on out. We are going to specify that fields as an array, and this is an array of formly configurations, or field configuration objects.

One thing that all the fields need, is a type, a template, or a template url. We'll specify a type, because we are using formly-bootstrap we can do this, formly-bootstrap has exposed the input type, and so, formly-bootstrap told formly, an input type looks like this. We have this input type, it's not very interesting, it defaults with the key of its index, and so, we want to specify a key, and the key of the original, if you look here, is first name.

Let's copy that, and put it as our key for this field, and now, if we type here, they're bound to the same model, and the same key on that model, and so, they update together both ways. We need a label, that's a template concern, it goes into template options, and the label will be first name. We are at total parody between these two forms, there's a lot less boilerplate in our template.

One thing, just to note, if we wanted to have a default to a value, then all we need to do is default our model. We could say, first name equals ob1 and now, it's defaulting to a value, because the form is simply representing the state of the model.

One other thing, we don't have to specify a type, we can also specify a template or template url, so, you could very easily say, template is hr, and that allows you to add spacing in your fields. We can add another field here, that's type of select, and the key is something, and the template options will have a label of select something.

Now, you have your selectInput, and you have a line there, your first name, interview. Although, what you need to do is, make sure that you are including formly on the page. We are doing that via script tags, but again, that can be installed via bower or npm. Make sure that, you include api-check as a dependency if you are doing just script tags, if you are using hom and js, angular-formly will require that itself.

Also, we are including the template library. Finally, in our module definition, we depend on the formly, and formly-bootstrap modules. We use the formly-form directive to create our form. That's an intro to angular-formly.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?