Add hidden fields to a Form with Angular Formly

Instructor: [00:00] One thing that is very comfortable about Formly is that data binds also the model value. For instance, in a form where we have multiple properties but we only map a subset of them, we can actually use the model to send them that dollar properties back to the server again.

[00:16] For instance, assume that we loaded the model from the server and we probably have some primary key here. Usually, the primary key is not part of my form values because I don't create a form control for that primary key and visualize it on a form.

[00:32] Rather, what I usually do is I bind default controls I want to change, for instance first name, age and so on, and my model is always up to date. Whenever I change the nation, you can see the nation here gets data bound immediately. In that way, I always have to enter model and I can directly send it back to the server on the onSubmit event.

[00:53] A different approach is to place the ID also in the form value and then use the form value to post back to the server. This can be easily achieved by directly going to the fields configuration and create a so-called hidden field. The only thing I'm binding here is the actual ID property. I don't specify any type or template options because that field should not be visible.

[01:16] If I change that and save it, and if I go now to my form value, you can see that the actual ID gets data bound, but it is not visible here on that form directly.