Ngx-formly: How to integrate ng2-formly-material2-templates

[divramod]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[x ] support request

Hey, thx for your work on ng2-formly.

i am trying to get ng2-formly running with the material2-templates.

After linking ng2-formly/lib/src/index.d.ts, my typescript compiler says that no member FormlyMaterialModule is existent. So i wanted to ask, why or how to integrate the material2 templates.

thx in advance

[mohammedzamakhan]

Do you mean https://github.com/formly-js/ng2-formly-template-material ?

[bonaparte89]

Yes I think thats what he meant.

[mohammedzamakhan]

@divyakumarjain was maintaining that repo. Feel free to contribute it. Will look into it in a week probably

[aitboudad]

well I think we can move ng2-formly-template-material into this repo like we did for bootstrap WDYT ?

[franzeal]

I don't have a strong opinion on it, but I'd like to see it go the other direction and move the ui-bootstrap module into a separate repo/library.

My hope would be that separating it would provide a good foundation for building additional UI libraries if they're not part of the core in addition to ensuring that anything in ng-formly that ui-bootstrap is using that's not exported will be available to all UI type libraries.

[aitboudad]

FYI I'll provide an initial work this week.
\cc @rjsteinert

[rjsteinert]

@aitboudad Thanks for the heads up.

@franzeal My guess is that 95% of people will use either Bootstrap or Material which would justify having them in this main repository. However, of those 95% of people there will be a currently unknown percentage of them who want to also provide their own custom form elements and for that use case we're definitely talking about having Formly Form Element Components in a different module. Is it currently possible to have two modules providing Formly Form Element Components? Perhaps by passing them into FormlyModule.forRoot()?

[mohammedzamakhan]

@rjsteinert Formly provides two options to define your types, one by using FormlyModule.forRoot() to define the types, validations, etc, but we also can define types, validations etc whenever we require by using the service FormlyConfig, which provides methods like setType, setWrapper, setValidator, setManipulator

[aitboudad]

Integrate material in core will force use to drop supporting angular v2.0, right now we have two choice:
1- Dropping support of angular 2 (BC break)
2- Include Material in a separate package (not my preferred one)

Let me know WDYT ?

[mohammedzamakhan]

I think since we are still in release candidate, we can drop support for angular v2.0, and when we release it, we will support v4.0+.

But yeah, we should do some voting from the existing users of the library.

[rjsteinert]

It would be cool to see some statistics on the matter, but my guess is that Angular 4 installations will soon dwarf Angular 2 installations.

[franzeal]

The maintenance of backwards compatibility up to this point has been very appreciated. I'm stuck on Angular 2 for the moment, though this would certainly apply pressure to upgrade. My opinion hasn't changed; you could just throw this side-effect in as another reason I'd like to see them separated.

I don't use the built-in UI libraries in our project except as reference material for developing our own. I don't know how many others do this sort of thing, but I got the impression with Angular-Formly this was encouraged and ng-formly vastly improved on that aspect (customization and extensability).

[swirlsky]

Any info on this how to accomplish that? (relevant question on stackoverflow)

[aitboudad]

blocked by https://github.com/angular/material2/issues/6728

[swirlsky]

Until a progress is made in this, are there any alternative solutions to make Material work? (a previous version or any?) Or Bootstrap? Are there issues with that? I didn't have a look at that one.

Material2 was my initial pick, right now I'm just trying to integrate any framework to give my forms some look.

[aitboudad]

@swirlsky Bootstrap is already implemented see Readme

import {FormlyBootstrapModule} from 'ng-formly';

for Material I had made an initial work, I just need some time to complete it.

[swirlsky]

@aitboudad Sorry, you are right, Bootstrap is OK, I just forgot to add some of its dependencies

[aitboudad]

I made an initial work #534, my main idea is the wrap all types inside Form field component.

Form field sound a great approach but I've got some issues such as:

• https://github.com/angular/material2/pull/7083
• https://github.com/angular/material2/issues/7737
• https://github.com/angular/material2/issues/7891
• https://github.com/angular/material2/issues/6728

Right now I used some workarounds until it resolved in material2 itself, keep in mind that material2 still in beta version so expect some breaking changes in the future updates.