formly does not respect `startSymbol` and `endSymbol`

[khasinski]

Using the following code

app.config(['$interpolateProvider', function($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
}]);

I change my interpolate symbol from {{ and }} to [[ and ]]. This is useful for Django and Symfony2 + Twig templates.

Formly still generates {{ and }} which obviously won't work.

[kentcdodds]

You probably have a really hard time with vendor libraries huh? :-/

We're not going to adjust the templates to support your use case. Here are a couple options you have (in order of recommendation):

1. Don't render templates with Django. There are many reasons why you should just have your server act as purely a services layer and serve your static files (html, css, js) on a CDN.
2. Just use formly.min.js instead of the templates and make your own templates. That stinks, I know, and I'm sorry that you have to render your stuff server side as well.

Good luck to you!

[khasinski]

This functionality is supported by almost any other angular directive and is a part of angular itself, so I never had a problem with vendor library before. Therefore I think it's a bug in formly. Think about jQuery plugin that would allow for noConflict to be used.

Rendering angular 'widgets' embedded into another page is also the basic way of demoing it in jsfiddle, especially now, when angular-router is a separate entity, and you can have another templating engine in use (angular can use react or DOM-based JS templating engines).

I'm not writing a SPA, I'm writing a form-driven application which happens to use testable front-end framework for dynamic functionality, so I don't want to have the server act just as a resource backend.

I propose to reopen this issue.

[kentcdodds]

Give me an example of a library that does support this so I can see how they did it.

[khasinski]

Sure thing, angular-bootstrap works fine in my project, they're using standard angular {{ }} in their templates, yet when using their directives it works fine in my code when I'm using [[ ]]

[kentcdodds]

You're right. Angular-UI Bootstrap is using $interpolate to construct some of their templates. Not all of them though, for example, in this plunker I don't know how the alert is working because it uses {{ }} in the alert.html template...

I've gotten a hack working in this plunker. If you look at setElementTemplate in the formly-field directive, around line 140, I've added a check for the start and end symbols and I do a replace for those in the templates.

I think that this is the only reasonable solution. I don't expect this to really cause serious issues. It would not affect those not changing the symbols so I think that I'll put it in. I'll make a PR and I'll let @Astrism look at it and merge it.

Thanks for not giving up on me @khasinski. Once again I'm reminded that I don't know everything...

[khasinski]

Thanks for this patch and PR, I hope to use it as soon as it's merged.

[kentcdodds]

It will go into master which is a little different from 0.0.16 (which you're likely using. You'll have to point your bower to the hash of the build commit to get the latest stuff. See CHANGELOG.md to see the breaking changes. They should have fairly minimal impact on you as I expect you have very little integration with formly as it is.

The PR is coming in a few minutes, but I want @Astrism to have a look at it before it's merged.

[kentcdodds]

@khasinski, technically, you should be able to point to this hash and start using the fix right away: 79cdc6d

Note: I noticed that using [[ ]] broke one of the demo's custom templates. I didn't look too much into it because using a different start and end symbol fixed the issue just fine and because it's a custom template you'll have total control over it. I just thought you'd like to know you may have to work around some things.

May the force be with you :-)

[ghelton]

Unlike many simple 3rd party directives, Formly does include it's own templates for the form and form fields. Since you're changing the symbol, those break. Any 3rd party directive you use that has its own templates and uses {{}} is going to break. As Kent mentioned we have a build with no templates at all, use this to get around the issue. You can copy all our templates if needed, but otherwise the templates are provided for convenience.

[kentcdodds]

👍 @Astrism