Implement multi-column layout Forms with Angular Formly
Real forms are rarely visualized as a single column with one field below the other. Rather they often span over multiple columns to save screen space. In this lesson we'll have a look how to implement such a multi-column form with Formly.
Note, future versions of Formly might even include some native constructs for more advanced layouts
Juri Strumpflohner: [0:00] Even though you might be impressed how powerful Formly is, like with properties such as expression properties or Hide Expressions, or how it deals with observables, still, you might think, "These are examples that are quite simple. We always have a flat form, which is not what you have in a real enterprise application."
[0:19] I can tell you, I have created huge enterprise apps with Formly, and you probably wouldn't be able to tell whether this has been created with a normal reactive forms approach or with Formly. Those forms are actually multi-column, as you might expect. Let's see how we can implement that.
[0:36] There are definitely different kinds of approaches that we can take here, but the main reasoning behind is to apply classes to these elements and tell Formly how many fields go in a certain row, and how many columns a certain field in our column-based layout will occupy.
[0:52] For instance, the first name might go over three columns while age is a smaller one, which might just occupy one column. In our styles CSS file, I have already pasted some kind of styles in here. This is not really the scope of our video.
[1:06] What you can see here is we have the display flex class, which goes under the container of a single row. Then we have different flex classes here that specify how many columns a certain field will occupy.
[1:19] Right now, I have a six-column grid, but obviously you can completely customize that to your own layout, or your own needs. Let's go back to our app components configuration. We now need to specify the container for single row.
[1:32] If only we can create here a new so-called field group. A field group groups many kind of Formly fields. We could say, for instance, the first name property as well as the age property here should go into a single row. We will move them into that field group. Now we know that that field group should have a certain class, which is that display flex.
[1:55] We can use the field group class name and add display flex on top of that. Similarly, on our first name here, we can give it a class name. We'll now apply those flex-add number. We could say that our first name should occupy three columns while, for instance, the age property down here should just occupy one column. That will be placed in one row.
[2:22] We can continue like that as well here for the nation. Again, here we have our field group, we have our array and move the nation property and city ID up there. Now, we also need to give it again that field group class name, which is display-flex. Then we have our final field, which will stay on a single row. We just have one field, which is our IP address.
[2:50] We can add here the class, flex-6, because this should basically expand to the entire row. Instead here, on our city ID, we can basically even it out. We can say class name here should be flex-3. Again, here also, the nation, you should have the same class name, flex-3.
[3:09] Now, let's move over to our form, and you can see how our form now lays out in multiple columns. For instance, here, the first name takes up more columns. The age is a smaller one, and then these two are evenly distributed. Then, we have a whole column again for the IP address.
[3:23] Of course, this is just a simple example, but you can see how you could customize that into a real wall layout. Now, one optimization I would definitely take here on this kind of configuration is to optimize that out, and that is the general suggestion.
[3:37] What we could do for instance here, is we could create functions. I'm creating in here inside our app component, but definitely move them out into a separate file. What we could say here is formlyRow. This is a function that takes a field configuration.
[3:51] It will be in array because we want to pass in multiple fields. What we want to optimize here or factor out is basically the creation of such a row definition. We could say here that we'll return [inaudible] data field group configuration. Here, we pass in the field config, which represents basically the series of fields that we want to configure.
[4:14] With that, we can already optimize here that whole configuration part because we could say here just formlyRow. We pass in that array here, and we can delete basically that part. Similarly, we can also refactor the rest. Finally, we have also formlyRow for our IP address.
[4:56] Let's check our form. We have [inaudible] arrow, so let's move up here. We have missed here the arrow function definition. Now, I could check our form. It still works just as we expect. You can see, however, how we basically reduced the amount of configuration we have to write.