Dynamically hide Form Controls with Angular Formly
In this lesson we're going to learn how to dynamically hide a form control with Formly's hideExpressions. These expressions are evaluated automatically at runtime whenever a change on our form happens. As a result we can easily hide - say - the city dropdown field when no nation value has been selected yet.
Instructor: [0:00] This case of our form here, we have these two dependents field. Whenever I, basically, set these to null, this gets disabled. We maybe not only want to disable it, but we want to directly hide it from the user.
[0:12] Similarly, as for the disable property where we use the expression properties here, we can do something similar for the hidden property of the form control. The only difference there is we get a different kind of expression, which is the hide expression.
[0:28] This is subject to be changed. Future versions might migrate this hide expression into the expression properties since it fulfills a very similar purpose, but for now we can use the hide expression again.
[0:39] We have different kind of possibilities. We can say whenever that model.nationId is not given, we hide the form. We can see here whenever I change this and remove this here, you can see the cities select box gets removed and is no more visible.
[0:58] Again, also here we can use that string expression, or we could use the normal model callback and say simply model.nationId, just as we did here above with the disabled property. That will work in the very same manner. Again, here you can see the cities drop-down gets hidden.