Add functionality to Angular Formly controls with Formly Lifecycle Hooks

Instructor: [0:00] In order to be able to further customize the behavior of our form controls here, of our Formly form controls at runtime, Formly has a concept of so-called hooks. Let's have a look how they work. If you open up here the definitions, you can see here these are of type Formly lifecycle options.

[0:20] What they consist of is of callback functions which are very similar to the one that actual Angular components also have. Let's have a look how that works. Let's, for instance, use the onInit lifecycle hook. What we get here is as a parameter in the callback function we have the field configuration that is a Formly field config type.

[0:42] Inside here, we can actually go and inspect how our field looks like. First of all, we can go to field. We can, for instance, dynamically set the template options. I could change here the label to first name changed, just to see the effect here of a Formly onInit lifecycle hook.

[1:03] Now we can see the first name changed label here appears and no more the one that we actually originally specified here. This is a very powerful way to here, for instance, issue some server-side call and based on that server-side call further customize your input form.

[1:18] You also have access here to the actual model, as well as to the actual form. Especially access to the form and the form control gives us a lot of power. Once we use that form here and the according form controls, we are actually back in reactive forms land.

[1:36] What we can easily do here is to, for instance, grab other instance of fields, like for instance the age field, and register on its valueChanges event and from that elaborate and continue as we need in our specific use case.