Dynamically set Model Properties with Angular Formly Expressions
Formly has a nice mechanism called "expression properties". These are expressions in the form of a function callback or string expression that are evaluated at runtime. In this video we're going to explore how to leverage these expressions to set values on our data model.
Instructor: [0:00] This example here, whenever we change here the nation and reset it to a null value, our cities box here gets disabled. What happens in that case is that in the form value we get nation ID null and we get the cities ID not displayed at all, which is actually what we want.
[0:17] In many cases however, we want to send back and deal only with the model. We want to have that model be sent back and synchronize with our form, which is totally the case whenever we change here our form our model value gets updated just as we want.
[0:33] However, in this specific case we can see the city ID still remains one, which is the value currently displayed in that city drop-down field. We definitely want to reset that. One way to reset again here is to manipulate here that observable stream that listens on that nation ID property.
[0:50] Whenever that is now with a tab or something, we could actually reset our model. We could here use the tab operator and then change the model value.
[1:01] Another very elegant approach here is again, to use the expression properties. Expression properties, as we learned, don't only allow us to set here template options and different kind of configurations of our form field.
[1:13] But surprisingly, we can also actually set properties of our model. We can set here model.setID. Instead of using the callback, which we could totally do, let's use this string expression form in this case.
[1:27] Whenever we don't have nation ID, we want to set the model.setID to null. Otherwise, we just want to keep this current setID which we have chosen. Let's see whether that works. Let's go to our model tap. Right now we have nation ID1, setID 1. If I remove the nation ID, you can see that both values get reset, as we intend.
[1:54] Now, the difference here between using the string value and the actual callback is just an aesthetics point of view. We could easily also here use the callback function as we did here in this enabled case. This is just another form of using expression properties and formulae.
[2:09] Whenever we pass a string, formula will recognize and evaluate that string at run time and actually execute it against what we defined here in front of that string, in this case, by setting the model.setID.