Use 3rd party Form Controls with Angular Formly

Instructor: [00:00] So far, we have seen some very built-in form controls that Formly gives us by these type declarations here, as well as the kind of customizations we might do in a template options.

[00:12] Of course, you might have different kind of controls. For instance, in the nation case here, we might have a lot of nations like in this example, I just have three of them but assume there might be thousands of them. Therefore, what we want to do definitely is maybe to provide some autocomplete here to the user, rather than a normal drop-down functionality.

[00:32] I'm not going to write my autocomplete myself. What I'm going to do is I'm going to use ng-select. Let's scroll down here to find the installation instructions. I'm using Yarn in this project, but you can definitely just use npm.

[00:50] Once we have ng-select installed, we need to do a couple of other steps in order to set it up properly. First of all, let's import here its corresponding styles and then we can go to our app module and register the ng-select module.

[01:08] Of course, you might do that wherever you want to include that ng-select. It might be in a shared module or, of course, also in your laser loaded feature module where you use ng-select. For this purpose here of this demo application, I'm just registering everything here in the app module to keep it simple.

[01:23] With that, we should have ng-select set up. Now, we need to integrate it with Formly, so that we can go down to our nationID and give it a different kind of type here. As a result, Formly should use our ng-select, rather than a normal drop-down field. Let's see how to do that.

[01:40] In order to implement this, we need to create a custom Formly type. For this demo application here, I'm just creating a file at the very root of my application. Of course, in a more real-world application, you might have different kind of fold structure where you have all of your custom Formly controls.

[01:56] In this case, let's just call it ngselecttype.ts for Formly type. What this is is just a normal, plain component. Let's start with this placeholder here. I'm calling it formlyngselect. Here we have our template. In order to create a custom Formly type, the only thing we have to do is to extend from field type. Field type here comes from the Formly core again.

[02:25] As a next step, let's create here the actual HTML of our component. Since this is material, we need to add here some couple of classes. Let me just add them here, which is mat-input field and mat-form-field-infix. This you can just look up on your order material components. You can basically adjust your own custom components to the material design.

[02:45] Next, we use ng-select. It is the component which we just installed by getting ng-select installed in our project. ng-select component takes a couple of properties here. First of all, it takes the items it should display, and this is by the items property.

[03:00] If you go back to our nation property here, you can see basically the template options. The options property is where the data gets passed in. Interestingly, inside those custom components via that field type, we can access the template options by the TO variable. We can just do the to.options to actually get the options in.

[03:20] In this case, let's say we by default just support observables and so we need to use async pipe to pass that ahead. Similarly, we can add a placeholder, which is an order property of ng-select. Again, here, we would like to see the label being displayed.

[03:36] Our property here is to bind value. Normally, the value property, so basically value would be the default name of the property that should be displayed out of these options. In this case, let's say we want to be able to customize it. Whenever the user provides a bind value property and provides us with a different property name, we will use that one. Otherwise we just use value as a default.

[03:59] Finally, a very important part is the form control. Since these are custom form controls, we definitely need to pass that ahead. Here again, Formly already sets up the form control in that field types. You can just use that variable as we inherited here in our component and use that.

[04:16] The last thing which we have to do to make it complete is to add its invalid class whenever our component basically is invalid. We can do that by the showError property. With that, we have actually set up our custom component, our custom Formly type.

[04:31] We now need to also register that. We go to the app module and we go down here to that Formly forRoot property. Here, we should have a types property, which is an array which allows us to pass in custom types.

[04:45] In this case here, let's call it myAutocomplete and to the component which we would like to use whenever that type is being used is our ng-select Formly component. As this is a normal Angular component, we obviously also have to register it. We have to go here to the declarations or wherever you registered that component and pass it into that NG module.

[05:07] The time should be defined. We can copy that and go over to our app component. Instead here of that type select, we can now specify our custom type which is myAutocomplete.

[05:19] You can already see here that the form control changed, so the styling is not perfect. That's definitely something you would want to work on on a real-world application. By just adding some classes, we could adjust that.

[05:30] You can see now, we don't have a normal select anymore, but we have some additional functionality like that X which clears the value. We can still select adjust as we are accustomed, and the data binding will just work. Now, we can also search something like Italy. That's exactly what that autocomplete functionality gives us.

[05:48] That's a very simple example of how you can basically embed a third-party component, wrap it into a Formly configuration and then use it within your formerly configs.

[05:57] I highly suggest you to go to the formly.dev. If you want to create more custom Formly controls, go to the GitHub repository. Inside there, go to the src folder and check out the different kind of form control implementations here.

[06:11] For instance, for material, you can just go inside there and check out for instance how our multi-checkbox is being implemented. You can see here that multi-checkbox type. You can exactly take a look how the author of Formly implements it and how he handles different kind of scenarios.

[06:27] That's a great way to learn and further dig into creating custom Formly controls.