Using angular-material and formly

[gussoler]

I have a controller that loads the formFields from a Json file (JSON powered form):

api.getModelForm().then(function(response) {
vm.fields = response.data;
vm.originalFields = angular.copy(vm.fields);
});

It generates the form as expected.

Now I would like to extend the type 'select' using as template:

'<md-select placeholder="State" ng-model="model[options.key]"><md-option ng-repeat="state in vm.states" value="{{state.abbrev}}">{{state.abbrev}}</md-option></md-select>'


And works fine, the type 'select' is using the new template defined. But here comes the problem: the directive is working but vm.states (map defined at controller) isn't found. I think when formly is used the controller's $scope can't be accessed from a directive, it is true?
How can I make it work?

I have seen the example "async-select-options-with-controller" I am also using "angular-formly-templates-material.js" but I would like to extend the templates and start using angular-material in conjunction with Formy.

Thanks in advance!

[kentcdodds]

Hi @gussoler. You are correct that you cannot access your controllers vm inside your custom template. You do however have access to your field's configuration object (using the options property in your template) and this is how you should accomplish this. Your template will look something like this:

<md-select placeholder="State" ng-model="model[options.key]"><md-option ng-repeat="state in to.options" value="{{state.abbrev}}">{{state.abbrev}}</md-option></md-select>

The to variable is a shortcut for options.templateOptions. I would recommend that you watch the free egghead.io lesson about custom templates (and I would recommend watching all the angular-formly lessons). Also, check out the docs as well as the example.

Finally, I would also recommend that you don't extend the bootstrap templates and instead create your own templates. Creating custom templates is easy to do and if you're using an entirely different CSS framework and component library you'll just wind up fighting the bootstrap templates the whole time.

Also, I would love to have some pre-built templates for angular-material. There's even a repo for it that has been started. However, I don't use angular-material at all right now so I have a hard time finding time to work on it. If you would like to take it over, I would help you get started.

I'm going to leave this open to remind me to create an example using angular-material. Thanks.

[erikhenrique]

👍 to create an example using angular-material.

Sorry for not being able to contribute.

[Saak-sri]

I am working on expansion-panel... and cant access the fields..
how can we access this--> vm.fields=response.data(from the controller) in HTML's
(*response.data being the parsed JSON containing various fields)