Comments (12)
We are working on a new solution to wrap the existing angular-material to create a new Form.io renderer around that framework. This is coming, but it may be the end of the year before it is ready for production.
from angular.
@travist Could you please confirm if angular/material can be applied on formio and if so, what needs to be done to get the formio working with angular/material.
from angular.
Hello @amccubbin
I am thrilled to see this come from the community. This library was actually developed to support multiple dynamic templates, which you can see from the templates
folder.
This file https://github.com/formio/ng2-formio/blob/master/src/templates/bootstrap.templates.tpl.ts serves as the "template" that the library uses to load the template, which can also utilize custom dependencies. The idea is to implement it like it is here https://github.com/formio/ng2-formio/blob/master/src/index.ts where to use Material
you would say something like.
import { ModuleWithProviders } from '@angular/core';
import { FormioBaseModule } from './formio';
import { FORMIO_MATERIAL } from './templates/material.templates';
FormioBaseModule.setTemplate(FORMIO_MATERIAL);
export const FormioModule = FormioBaseModule.forRoot();
This would then load the material template into the core renderer and it would use that instead. I did run into an issue though with the forRoot()
declarations like Datetimepicker
(which is bootstrap specific. Here is the issue for that which will need to get resolved to keep the core agnostic of template. angular/angular#14022. Until that is fixed, I had to do something ugly like this to get it to not throw errors. https://github.com/formio/ng2-formio/blob/master/src/formio.ts#L20
Let me know if this points you in the right direction. My goal is to have this library support all the major UI frameworks.
Thanks!
Travis.
from angular.
Great, that helps a lot. I'll poke around and try to scope out the time it would take to make this work. Since I'm not using bootstrap, having alternative templates would be quite helpful.
from angular.
How do the recent changes to the underlying renderer affect templating? Will integrating material design directly be possible, or will we be forced to use bootswatch for styling?
from angular.
@travist — links from your previous answer aren't working anymore. Can you please suggest what is current recommended solution for applying Material to Form.io?
from angular.
Hi. Is there any update to using different templates (eg Material) ? The link above is broken...
from angular.
same issue, please suggest.
from angular.
The angular-formio library is now a wrapper around our Vanilla JS renderer @ https://github.com/formio/formio.js. The unfortunate thing is that templating is not as easy with the VanillaJS renderer than the previous angular version.
What will be needed is the ability to control the class names that are created within this renderer so that any CSS framework can be applied to it.
from angular.
@travist : We have the same question as @vipinc38, our project also requires to mix Angular/Material with form.io
from angular.
thanks for the quick response @travist it's helpful to know.
from angular.
Closed due to no activity
from angular.
Related Issues (20)
- [BUG] Unable to type in year
- [Question] [Custom Components Support Request] -How to create custom Anguler component widget with possibility to drag other widgets into? HOT 1
- Implementation of FormBuilder give "Cannot read properties of null" HOT 1
- [Custom Component] - Is it possible to access the current instance of the Formio Component within the custom component? HOT 16
- Enhancement Request: Use Mat Dialog for Confirmation Pop-up in Form.io Form Builder
- Minimal schema on formbuilder json
- [Question] - [Custom Component] - Custom components are not maintain the state when dragging HOT 1
- [BUG]
- Enhancement Request - Improved Table Functionality in Form.io Form Builder
- Panel component not collapsing HOT 1
- class="form-control" HOT 1
- Add custom html HOT 1
- [Question] Angular stable version 16 or higher HOT 1
- [Custom Components] How can we create custom component ? and How can we get the current instance of the component in Angular 16 ? HOT 3
- [Question] - Any specific reason for deprecating custom components in 6.0.0-rc1? HOT 2
- [Question] - How to get paid support? HOT 1
- [Question] - How to create formio module as a Angular Library? HOT 2
- [Custom Components] Problem with advanced logic HOT 1
- Loading gear always visible even after successful form loading
- How to remove individual options (such as Display/Label Position or Data/Persistent). HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular.