angular-formly: expressionProperties

[00:01] To add interaction to our Angular Formly form, we simply need to use the expression properties property for our field configuration. Let's add some interaction to this form. When I check this I agree to whatever checkbox, I want this field to appear. If it's unchecked, I want this field to disappear. Normally what you would do to hide a field is you'd simply say hide is true, and that field would no longer be there.

[00:22] But we want to add some interaction, so instead of hide true we'll say expression properties as an object, and then in here we'll say hide based on the model and we're going to be keying off of this agree, so we'll say in model.agree and we want it to hide when model.agree is false, so we'll add the not there. So if I go back to my form and I check that, the field appears, and if I uncheck it disappears.

[00:50] Now I have this dynamic property being set on our field. Let's add the ability to have this last name field be disabled if the first name field is not filled out. To accomplish this we'll add expression properties as an object, and here the disabled property appears in our template options. So I say disabled is true, then you'll see that the field is disabled. I can't simply say disabled here, because that is not pointing directly to our template options.

[01:23] To overcome this, we'll add this as a string where it's templateoptions.disabled referencing this disabled property. We want it to be disabled when the model.firstname is false, so not model.firstname. Then we'll remove this here. Now if I type in Kent C you notice that the last name is enabled. This applies to much more than just template options, of course, you also have the ability to specify a data object on your field configuration.

[01:56] We can say data and provide anything in here that we would like. So if we have some sort of data property that we're keying off of, then we can simply say data.turtlesallthewaydown. You can imagine what htat would set. The ability to specify a strong for your expression is very terse, but sometimes you need a little bit more power than that. Let's switch out this disabled to be something a little bit more interesting with a function.

[02:27] This value is actually what's called a Formly expression which can be an expression as a string, or a function that accepts a view value, a model value, and a scope. In here, we simply return the value that we want to have set to our templateoptions.disabled. So if I returned simply true, then our field is disabled. If I return scope.model.firstname and we'll not that, then we have the exact same stuff that we had before with our string.

[03:01] You can see that the string is a little bit more terse and easy for simple calculations like this. However, one extra thing that this allows us to do is we can return a promise. Let's add a timeout in here to simulate a promise making a call to the server, for example, and we'll return timeout with a function.

[03:25] Then inside of this function here we'll make it take one second, we'll simply return the scope.model.firstname and we'll return the not, so we have the same instance, and then you'll notice that field gets disabled after a second. If I type something here, you'll notice that the field gets enabled after a second. The ability to return a promise is the part that I'm trying to feature here, that you simply return a promise and whatever that promise is resolved with, will get set to the value of the templateoptions.disabled.

[04:04] That is expression properties to add dynamic interaction to your form. You simply add the property that you would like to set and you can provide a string, or a function that returns the value that you want, or a function that returns a promise that resolves with the value that you want. That's expression properties with Angular Formly.