angular-formly: Custom Templates
The type functionality of the angular-formly library is powerful. In this lesson, see how you can use it to create custom templates for your field configurations and see what is available in the scope of each of your fields.
[00:01] To create a custom template using Angular-Formly, you need to register a type with Angular-Formly. We'll do this during the run phase, say app.run function formlyConfig. Then in our formlyConfig, we'll say set type, and we'll pass an object. This is our configuration for this type.
[00:21] The type will have a name, and this will be input and then we'll also provide a template and we'll just say helloworld. Inside of our field configuration, we'll specify a type as input...Oh and I've not got a semi-colon there, there we go.
[00:35] Then we'll see that our field there is "Hello World." Now, let's make this a little more interesting and let's look at some of the options that you have with your templates, your custom templates. Instead of templates, we're going to specify a template URL. I have one already in here called input.html.
[00:51] Now, let's look at what that template looks like. What I have here is a pre that is [indecipherable] repeating over this, which is the scope, and then displaying the value of each of its properties.
[01:05] Let's uncomment this, and see what we have available to us inside of our template. You have available to you all of the fields for that particular form. You will not likely use this very often, but this can be useful sometimes. You also have access to the form controller for the current Formly form that this field is being used in. You have a form ID, you will not use this very often.
[01:30] You have form state, and this comes from the options that you pass in, so if I were to pass in on the Formly form options, say vm.options, and then in here I say vm.options is an object that has formstate, and then I say foobar here, then our formstate is foobar.
[01:55] This is a way that you can share state between different fields inside of the same form. Then you have your form ID, or rather the ID of the field and you won't use that very much, Angular Formly uses this internally.
[02:13] Then the index of the field, and the model, so if I were to pre-fill this with first name is Jane, then in here, we see that our model is firstname Jane. Then also the options, which represents all of these options here, but you'll notice there are a few extra things that are attached to those options. These are some things that Angular Formly tacks on.
[02:37] Finally, you'll have access to the TO object, which is actually a shortcut to template options, and we'll say label = firstname.
[02:50] Now, in here, inside of our TO, we see label is firstname. It's a shortcut just because it's a lot more work to say options.templateoptions.label than it is to simply say TO.label.
[03:05] One other thing that you don't see in here comes if you have an ng model in your template.
[03:12] Let's add an input with an ng model. If we look at the different things that we have available to us, we have the model and that's what we want to bind this to, and then we say options.key, and this is what you'll normally want for all of your templates is this is the model that the user of your template is trying to specify as what they want this field to be bound to, is whatever the model is is specified and then the key on that model.
[03:47] Now, inside of here, we also have fc which standard for form control. This fc is actually simply a shortcut to something that is placed onto our options called form control. So it's options.formcontrol, and this is the form control for this particular field. It's basically the ng model controller for this field.
[04:13] One other thing is this show error, this will indicate to you whether or not you should be showing any error messages based on the validity of the form.
[04:23] If I were to in here say required is true, that show error will say false because the field hasn't been touched. Once I touch it and then blur, then you'll notice untouched get sets to false, and touched get sets to true. We'll go back down to our show error and that is now true.
[04:42] In review, to create a custom template, you simply set a type with a name and a template URL or a template, and inside of the template, you have access to several things that tell you information about the configuration for that field, and you use those configurations to render whatever it is that you want to for that field.