Create a Simple Form in Angular with Formly

Instructor: [00:00] Now that we have Formly installed, let's configure it and set up some first form. First of all, Formly is based on the reactive forms module. We can just create a plain normal form. Let's also create here form group just as you're accustomed with reactive Angular forms.

[00:18] Let's also use an ng-submit here and immediately set it up and we pass in here the form. Obviously, we have also to go into our app component and create those parts also there. We have to create here the form.

[00:37] Let's create here a new form group. We don't pass any controls inside here, but we just provide here an empty form group. Also, let's define it on the submit and we get here the valid and value with structure directly and then let's console.log that out. With that, we have basically created a new reactive form.

[01:02] Now comes the special part that makes up Formly. Instead of creating here the different kind of form controls in our HTML file and then link them up into our corresponding reactive form controls that we define in our component, what we do here is we use that Formly form component.

[01:19] This is something that came when we installed Formly into our project and that Formly form component has different kind of properties. First of all, it has a model. Now it's directly linked us. Obviously, we have to define this model property later in our component class. For a second, let's just reference it here.

[01:36] Next one is the fields. Fields are needed by Formly in order to generate dynamically all those form controls. We will see them in a minute. Again, let's just reference them and then we pass in the actual form that Formly should hook onto itself.

[01:53] Now we need to define these three parts also in our component code. First of all, we have to create the model. The model is nothing else in our data model. For now, let's simply create an empty one here. This will be the part that you would normally fetch from some server-side API or from some NgRx store or wherever you have your model that you want to display on the form.

[02:17] Next are the fields. These fields are, as we mentioned, the so called Formly field config parts. That's where Formly defines how the forms would look like. That's exactly where we are going to define now.

[02:35] As a first step, let's create a simple input form. Assume that in the model here, we model here a person object and so we would have probably something like firstName. Let's add here Yuri. Let's also add some age, 34, and so on. For now, let's stick with these two.

[02:56] Assume we want to create an input form for our firstName property. We'll go down here into the Formly form config. This kind of configuration has a special syntax, of course, where we can look up on the formly.dev website. What it consists of is first of all the key and the key matches the property in our model.

[03:16] Here for instance, I'm telling Formly, data bind the firstName and so we'll automatically hook up into that firstName property up here. Next, I'm telling it what type of form control do I want to run on my page and that's an input type.

[03:32] Finally, we give it some options, which is defined in those template options. These allow me to customize further how my input form should look like. In this case, it's simply of type text. I want to have an input type text.

[03:48] Since text is the default, we don't have to write it, but I want to write definitely the label. In this case, it's firstName. Let's save this and now, as you can see already in our form here on the side, we already get here an input field, it's firstName. It already data binds Yuri. We can write in and it's just a normal angular material input field.

[04:14] Let's add some debug component here, which I have already in this project. I set it directly below here. What this debug component does, it gets the form value and the model itself. This will help us visualize what is going on on our form.

[04:30] For instance, in this case, if I open it up, you can see the form value. The form value is already data bound and you can see it live updates whenever I change the form controls value here. This is the model which maps onto that model property, which we have to find here.

[04:46] In fact, you see here we have the firstName as well as the age property, which we didn't yet map on our form control in our form. Therefore, we don't see it in a form value here.

[04:55] The interesting part here with Formly is that it doesn't only live update the actual form value but also the model. We can directly bind the model into it and send it back to the server even if we're only mapping a subset of it, such as the firstName in this case.

[05:12] Let me also quickly add here the Submit button. We add them within our form here. We have the Reset button here, as well as the normal Submit button. Now if you open up the DevTools console, let's click the Submit button here, we can see that actual submit also works just as we expect.