Render Dropdown fields and bind Observables streams with Angular Formly

Instructor: [0:00] So far we have mapped our first two properties here. Now, let's assume a bit more complicated use case. For instance, every person probably belongs or has been born in a specific nation.

[0:11] What we have here is usually a nation ID, let's say two, which points to the ID of the nation the actual person was born in. That's usually represented by some kind of dropdown field. Let's go and create one below, here.

[0:27] Again, that will map to nation ID, the property we just defined on our model. Then the type here now is no more input but as select, because what we want to create is a select box which has a tag select here.

[0:42] Now, in the template options, we again specify our label. That would now be nation. Let's save this for now.

[0:52] With that, we get here that nation dropdown field visualized on our form.

[0:57] Now, the problem right now here is that we don't have any kind of options to choose from. In order to do so, we can specify them in the template options here.

[1:07] What I could do here is I create this options field, which is an array, which usually consists of a value, which would be the ID, which is one, and then the actual label. That could be like Germany. Here, let's do value two. Just label Italy, and so on.

[1:28] Now, the application will refresh, and you can see now Italy has actually been pre-selected. The reason is now our dropdown field has actually already been recognized. I have value two for Italy in my options list as well as the value that is data-bound on my model is two. Therefore, Italy is already pre-selected correctly.

[1:49] You can see I can open it. I can select a different one, and this will get reflected then on my form value as well as on my model, just as we would expect.

[1:59] Now obviously, hard-coding these values here in our form configuration is usually not an option we can go for. In real world applications here, we would have a lot more. Moreover, those values usually come from a service site.

[2:13] In order to emulate that, let's create a new service, ng g service, and let's call it data service. Now, if you map our data service, let's create here a function getNations, which returns us a set of nations, which we can then data-bind onto our dropdown field.

[2:34] In order to have this as similar as possible to an actual HTTP call, let's return here an observable. I'm using here that off function. Let's import that. Let me paste in here just a set of nations. We can save this.

[2:50] Now, let's go back into our app component. First of all, we obviously have to import that nation service into our constructor. Let's place the constructor down here.

[3:00] We have here the data service. Now we can actually go and use those nations that we already returned from the data service.

[3:09] The interesting part here is that options property here in Formly does not only accept here an array, but we can directly hook it to an actual observable. What we can do is here is we can say this is a data service .getNations.

[3:24] Formly will automatically recognize this is an actual observable. It will subscribe to it. Once the value resolves, it will actually bind and visualize them on the form. Let's refresh here again.

[3:39] You can see now Germany has been selected because here the second one is Germany. Let's switch to one which in our data service is Italy. You can see it currently gets reflected as well as the different kind of values get pre-filled as we expect from our service.