angular-formly: templateOptions
angular-formly templateOptions bring a great deal of power and flexibility to your forms with angular without sacrificing simplicity in your templates. The templateOptions property allows you to specify some attributes that would normally exist on your ng-model like required, maxlength, and even ng-click. It also works great with expressionProperties.
[00:01] Angular Formly gives you a lot of power with the template options property. In here, I can specify required as true with a colon, and that field gets required.
[00:10] I could also specify it as disabled, and then, I also have the ability to specify min length is six and max length is 12. Then, I'd say, "Hello, world." You see the model gets updated appropriately for that.
[00:31] Then, you can also specify pattern and a couple of other max and min, and that kind of thing. Then, you can also specify events. On click is a function that accepts the view value, model value, and the scope.
[00:47] Then, we will alert "Hello," and as soon as I click on this, I get "Hello." This is a Formly expression, instead of a function, if I can express this as a string, as a Angular statement, then, I could simply say, "model.lastname equals clicked."
[01:09] Then, if I click here, that gets prefilled with clicked. There's some magic going on here behind the curtain with Angular Formly that makes this very performant and magical.
[01:22] If you look up here, I have this run function that injects Formly config and gets the input type, which we're using in here and it gives us the template.
[01:30] Normally, with a normal directive to accomplish this, you'd have to have an NG click, NG required, NG disabled, NG min length, max length, but that's just too much overhead.
[01:40] Angular Formly helps you a lot with this. This is part of what makes creating custom templates so simple. If we look at what is logged with this input.template, all we see is an input with a class and an NG model.
[01:56] This is extremely powerful. I'll be honest, there are a couple of wrappers here for the labels and things, but for the most part, the main use case, you simply need to have some sort of control that has an NG model on it.
[02:11] Then, Angular Formly will add the NG required or simply required, whatever it is, that needs to be added to your NG model element to make this all work. That's one of the power behind template options, you can specify many things that you would expect.
[02:34] The documentation has some of the other things, and then, you also have the ability to specify your own attributes. You can specify NG model letters, and then, there's an API there for you to be able to specify your own attributes that get dynamically added to your NG model element.
[02:53] There's documentation for how you accomplish this, but that's template options with Angular Formly.