Dynamic Forms with Angular Formly and JSONSchema

Instructor: [0:00] In one of our previous videos, we have seen how to dynamically construct that Formly field configuration out of a JSON file that we get from the server.

[0:08] Basically, the server is able to expose our Formly configuration. It looks exactly like our Formly configuration which we would type out ourselves. We can fetch that and assign it then to our fields, which will then be ran by Formly.

[0:22] Another way off to finding a server-side structure of a form can be via a JSON schema. It's often facilitated by backhand frameworks that have some utility functions already in place to generate JSON schemas out of an existing server-side form or some server-side data model structure.

[0:39] That's also why Formly has the port for JSON schema. Let's have a look how that works. First of all, let's remove here the current form [inaudible] . JSON Schema has a different one. We start from an object, usually that has a title. In this case, let's just add some title here in this form. This is not mandatory. It can also vary a bit in how you expose your JSON Schema on a server side.

[1:03] Now, the type here is of type object, because we have some [inaudible] properties here. Those aren't defined in that property's object here. Inside there, we can actually then lay out our actual fields.

[1:15] Let's start with our first name, which is a simple one. Again, here, we'll have to type. A type here is string. Here, we describe as the type of data that we expect to send back inside the JSON that contains this kind of key, this kind of property. The title here is first name.

[1:36] Let's get started with this simple structure and map it onto our Formly form. If you go back here into our app component, we can obviously not keep this simple way of fetching the JSON from the server and then assigning a direct our Formly field conflict, because in this case here we won't get directed the Formly field configuration, but rather, the JSON Schema field.

[1:57] Let's call a JSON Schema here for now. As a result, we need to map the JSON Schema. Luckily, Formly already has a proper service for that. Let's import that. Let's call it Formly JSON Schema. Let's type Formly JSON Schema.

[2:13] We can import that directly from the Formly core package, so from ngx-formly/core/json-schema. Let's import the Formly JSON Schema service.

[2:29] Once we have that in place, we can actually go and map our JSON Schema object here into a proper Formly configuration. Here, we defined a Formly config. We can say this.formly.json-schemaservice.tofilconfig. This expects here a JSON Schema.

[2:47] For now, let's just log out the Formly config to see what we get as the result. If we open up here to console. Let's scroll up a bit. We can see here, we got a type object which then contains some various properties. Like here the template options which are Angular form label.

[3:06] We could use it actually as a title for our form if you want. We have a lot of instances here in this field group which then contains our actual values, our actual Formly configurations that we want to map on to our form. Inside here, we actually want to use that formlyconfig.fieldgroup and assign that to our fields.

[3:29] So far so good, but we see we still have an error here. The error says that there is no type defined by the name string. The problem here is that string is not a valid type for Formly because Formly contains types such as input and so on.

[3:43] Obviously, if we can map this to input on a service side is, it would work and you can see that the field appears properly on our form. Usually, JSON Schema is automatically converted in with type like string or number or this kind of information.

[3:59] We need to give Formly a hint on how to interpret this kind of type. We can do that by going to the app module here. Inside that type registration of that Formly module registration here, we can define something like the following.

[4:13] We can say, "Whenever there is the type string, extend it from input." String will inherit all what has been defined for the type input. This is really a handy way to define this and override or add additional types. Then you can see it works properly just as we expect.

[4:31] Similarly, we can also map for instance another probably like the nation ID which is a bit more complex. The nation ID on the surface side would be probably exposed by a type number. Again, a title here can be nation. Now again, let's see if this probably still got the same exception that number is not something that Formly knows out of the box.

[4:57] Exactly we get that same exception as we just got for type string so we can go here and also define number. We can say this extends from type input as well, but on the other side, this has also some default. For instance, the number has a template options type of number. In that case, we cannot enter any characters.

[5:18] We can say default options, and then specify the template options just as we would manually define, and say here type number.

[5:26] Basically, a number type that comes from the server extends input, basically inherits all of those properties. We also want to immediately set the type number property on that input field.

[5:39] As a result, you can see here we get that number field here with the nation ID that comes from the server. We also get those arrows up and down. We cannot type any kind of characters in that inside there.

[5:49] On the side, for the nation, we expect some dropdown field. In the JSON Schema format, you're quite limited in what you can define, but there's a property called widget, which allows you to specify some UI type of information.

[6:05] We are actually using that widget here which is a free form field, if you want, to define some Formly config. This Formly config is read automatically by Formly, and then mapped onto the Formly configuration. We can now specify here for instance, the template options or the type which we want to have.

[6:23] For instance, here, we could override a type number, and say this should be a type salak because you want to type salak to a salak box, a dropdown field in end. We also want some template options because we need to define actual options, the [inaudible] font inside our dropdown field.

[6:43] We have our usual values here. We could have null, and then value one, and label Italy. Now we can see that we get the proper dropdown field just as we expect here.

[6:57] You can see that Formly config is automatically read by Formly when it passes that JSON Schema, then basically the content is mapped onto the corresponding Formly field configuration. It basically overrides everything that has been defined before here. It allows us to specify additional times as well as additional template options and so on.

[7:17] If you want to additionally modify or customize how a certain JSON Schema field here is interpreted by Formly, you can go and add additional properties here in that to field config. [inaudible] the second parameter, we can pass in some options. One of them is a map property.

[7:36] That map here is actually a function that gives you the mapped field, which is the Formly field configuration, which Formly automatically extracted from the JSON Schema entry, and also the original entry of the JSON Schema.

[7:49] Based on that, you can actually continue and manipulate that map field and then return your actual Formly field configuration that you want to have on your form. There is really powerful mechanism for implement some custom behavior you might have in your specific application. For now, let's just undo the selection here again.

[8:09] We can also specify some additional information such as the required fields. It's just specified in a bit of a different syntax inside of a JSON Schema. What you have at the very bottom is the required property, where you specify the IDs that are required.

[8:24] For instance, we can specify here the first name. If you save that, you can see that Formly currently identifies that require property. It sets required validator onto that field. We get all of the validation that we usually have on our form.

[8:39] There are many more properties that Formly supports, and many more properties that you can specify in a JSON Schema. Definitely go check out the specs and the source code inside Formly.