Introduction to angular-formly

[00:00] 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.

[00:18] 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.

[00:47] 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.

[01:04] 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.

[01:18] 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.

[01:53] 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.

[02:26] 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.

[03:04] 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.

[03:37] 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.

[04:07] 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.

[04:27] 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.

[05:00] 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.

[05:26] 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.