angular-formly is a terrific abstraction on top of forms in Angular. This short introduction shows you how to get started with angular-formly.
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.
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.
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.