angular-formly allows you to keep your forms as DRY as possible. The `optionsTypes` property is one way of composing your field configurations to keep your forms light-weight and DRY.

angular-formly: Default Options

[00:00] One of the big benefits to angular-formly is how it makes your code DRY. Here, we have a basic form with an IP address. It is validating that IP address for us. We're inlining all of this configuration into our field, but let's say that we wanted to add this IP address field elsewhere.

[00:16] We would have to copy and paste this same field configuration somewhere else. We don't want to have to do that. With formly, we don't have to. What we're going to do is create some default options using angular-formly's formlyConfig.

[00:30] We're going to do this during the run phase. We'll run a function that has a formlyConfig, and then we'll create a custom type that has our defaultOptions. We'll say, "formlyConfig.setType." The name of our type will be "IP Address." This will have defaultOptions.

[00:53] Inside of here, we'll take any of these options in here that we want to apply generally to IP addresses. I'm thinking that we'll take all of these options and stick them up inside of here. We'll remove that, and then we need to take our function. We'll stick it right here.

[01:13] Now, this input field is not being validated as an IP address. We need to reference this IP address type in our field configuration. We do this by specifying optionsTypes. We tell angular-formly where the defaultOptions are going to be coming from.

[01:30] The type where we're going to get our defaultOptions from is the IP address. We'll pass that in here. Now, it will pre-fill all of our defaults. We get the validation and everything, including the label and the placeholder.

[01:45] If we wanted to override any of these, we'd simply specify them. We say, "templateOptions," and then we'll say, "Our label is 'My IP Address.'" Now, we override these. Same goes with placeholder or anything else. It will be overridden.

[02:01] It's notable to mention that this actually differs from simply using a type that extends input in two important ways. First, this optionsTypes property is an array. It can have multiple types specified in here. Second, if I were to have a controller on this IP address, then you'll notice, if I console.log that scope, you're not going to get that console.log anywhere.

[02:26] It basically only takes the defaultOptions from this type. That's how it differs from extends or simply using the type, is that optionsTypes only takes into account the defaultOptions property. It's very beneficial for just storing defaultOptions and being able to compose those on top of your field configuration. That is how you use defaultOptions with angular-formly.

angular-formly: Default Options

Share this video with your friends