Dynamically Render Form Fields
-
This is the greatest thing I’ve built in months. So stoked and thank you to @metalsadman for helping me get it the last mile. This completely changes how I will manage my data models going forward!
General idea is that you define your form fields as schema. Your Form component will iterate these field definitions and the Field component will render the specified UI component with all the settings specified. It’s beautiful in action. You can use ANY UI component you want.
You will need to include any UI component you render this way in the components section of your quasar.conf file. Even if you have importStrategy set to ‘auto’. That only works when the components are visible in the template when being rendered. Since this is dynamic that no longer works
-
@Graypes look also here:
https://quasar-easy-forms.web.app/
https://quasar-easy-tables.web.app/
More of these here:
-
@Graypes Great work!
Some questions/ideas :
- How do you deal with validation?
- Integration with vuex-orm classes would be awesome
- branching (for example: if this.qfield.selectedValue= ‘foo’ then add/enable question x ) Like a survey build tool!
-
Great ideas, @dobbel ! For now my focus has been on the rendering and, since this post, I’ve been able to add more complex use cases. Now I can handle rendering of nested components, all dynamically. This was actually my ultimate goal. I’ll be posting a full story on it soon.
@qyloxe There are many good solutions for rendering forms but none that I found met my criteria. The big one was being able to render simple AND nested components completely dynamically. In other words, I don’t need to build a component template and pass in props. The whole thing is dynamically generated!
-
@Graypes said in Dynamically Render Form Fields:
The whole thing is dynamically generated!
Cool! The next obvious step is to integrate with some drag and drop.
-
The write up I promised!
https://medium.com/@graypes/add-dynamic-forms-to-your-vue-app-609de4005a2b
-
The article written by Graypes is very good and deserves attention by forum users, but for someone not familiar with using render functions in a Quasar app, it is very difficult to implement. Is there a Render Functions 101 example which shows what is minimally required to get started with Render Functions in Quasar? Thanks (again) for the Medium article.
-
Very nice article. In vue 3 there will be no more mixins in favor of the composition api. Do you see a way to migrate your dynamic rendering of forums to Vue3?
