CODEWITHSUNDEEP
javascriptangularjsangular-formly
david
david

Reputation: 859

Angular-formly: Why does the directive behave differently from the type?

I have two input fields, both generated by the same template. On both I am setting

...    
templateOptions: {
  ...
  required: true
}

One input field is registered using formlyConfig.setType the other using a directive. I have created a JS Bin here.

Only the first is getting the required attribute, the second is not. In the docs for custom templates (controller option) it says:

Provides you the ability to add custom behavior to the type without having to make an entire directive (you can make a directive instead if you wish).

What am I doing wrong?

Upvotes: 0

Views: 180

Answers (1)

kentcdodds
kentcdodds

Reputation: 29021

The problem in the second example that when angular-formly is processing the options with the template, all angular-formly sees is: <plain-text> for the template. Hence, it doesn't know what element to place the required attribute on. angular-formly will only attach attributes like these to elements that have an ng-model on them because those are the only elements where that attribute makes sense.

Again, the key here is what angular-formly sees when it's processing the template (before it's compiled). It doesn't matter what the directive compiles to. So yes, you can use your own directive, but if you want to leverage the features of angular-formly, it needs to utilize the ng-model controller (like directive used in this example).

Good luck!

Upvotes: 3

Related Questions