No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    QForm - Form Fields Generator

    Show & Tell
    9
    19
    9473
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • G
      gh7531 @njsteele last edited by

      @njsteele Thank you for your example! It really is awesome with quasar.
      Do you know by any chance how/if the import of the quasar components can be skipped and ‘input’ be directly replaced with ‘q-input’?

                ...
                children: [
                  {
                    #component: 'input',
                    component: 'q-input',
                    model: 'firstName',
                    fieldOptions: {
                ...
      

      Something simillar is done in the fourth example in the documentation but I cant get it to work with quasar in the same way.

      1 Reply Last reply Reply Quote 0
      • A
        Amod last edited by Amod

        @njsteele @gh7531 Thanks for your example. I started checking vue-form-json-schema for a project but couldn’t get it running. The default html UI elements work, but Quasar components dont.

        My code is as, what am I missing? : Note: I get an error in the browser console - Unknown custom element: <q-input> - did you register the component correctly.

        Failed to mount component: template or render function not defined - where is this to be added?

        <template>
          <q-page>
            <DynaFormComponent :model="model" :schema="schema" :ui-schema="uiSchema" />
          </q-page>
        </template>
        
        <script>
        import DynaFormComponent from 'vue-form-json-schema'
        import QInput from 'quasar'
        
        export default {
          name: 'vueform',
          components: {
            DynaFormComponent, QInput
          },
          data () {
            return {
              model: {},
              schema: {
                type: 'object',
                properties: {
                  firstName: {
                    type: 'string'
                  }
                }
              },
              uiSchema: [{
                component: 'q-input',
                model: 'firstName',
                fieldOptions: {
                  class: ['form-control'],
                  on: ['input'],
                  props: {
                    type: 'text',
                    placeholder: 'Type here'
                  }
                }
              }]
            }
          }
        }
        </script>
        

        I have tried all possible combinations of component: ‘q-input’, component: ‘qinput’ etc. But cannot figure what I am missing.

        Any help is appreciated !

        Ty.

        dobbel 1 Reply Last reply Reply Quote 0
        • dobbel
          dobbel @Amod last edited by

          @Amod the error usually comes from the fact that the quasar component is not registered in the q.conf file.

          https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework

          if you’re not using Auto Import then you can do some thing like this:

          components: ['QInput','QTable','QFoobar']
          1 Reply Last reply Reply Quote 0
          • A
            Amod last edited by

            @dobbel , Thanks for your reply.

            I am using - importStrategy: ‘auto’, and tried removing the QInput from the component. No luck yet.

            1 Reply Last reply Reply Quote 0
            • A
              Amod last edited by Amod

              @dobbel , Thanks for the pointer. It now works. What I had to change was:

              My import strategy was already auto, (though I can turn it off and use required components)

              but to get this to work I had to even set
              components: [‘QInput’] in the config file.

              The configuration file now looks like:

              framework: {
                    iconSet: 'material-icons',
                    lang: 'en-us',
                    config: {},
                    importStrategy: 'auto',
                    components: ['QInput'], // added this
                    plugins: []
                  },
              

              It should have worked with importStrategy:auto in the first place. Right?

              dobbel 1 Reply Last reply Reply Quote 0
              • dobbel
                dobbel @Amod last edited by dobbel

                @Amod Yes I think you did everything right if you did not use the form-builder. What I think what went wrong in your case is that the form builder uses dynamic components and so not the q-input component explicitly in templates. So the ‘auto’ mode fails to see the need of importing q-input or whatever components the formbuilder creates.

                1 Reply Last reply Reply Quote 0
                • D
                  dgk last edited by dgk

                  My original post is quite old I have a much improved version of my form builder! as well as the app in general.

                  9af3008d-ee90-4262-96ef-47908b3eb2df-image.png

                  I did at one point try out vue-form-json-schema but it just didn’t fully meet my needs. One of the cool things my form builder is that it can use the values of one property in a schema instance as the option choices in another dynamically. Also I made it really easy to hide/show and have props of schema depend on the values of others. That you set in the schema. I really want to document and share this but just too preoccupied right now to do that. I have a major deployment coming up in the next week and after that I can put some attention to this if there is interest. In the meantime if you are savvy enough take a look at my repo of this project I am deploying that makes use of it. The component in question is Form.vue in the components subdirectory directory

                  https://git.kebler.net/Light2/frontend/src/branch/master/src/components

                  here are the schemas used. Notice they are in yaml format instead of json. This makes it WAY easier to comment stuff out and add comments. Of course they get read into a javascript object same as json.

                  https://git.kebler.net/Light2/database/src/branch/master/schemas

                  take a look at the config schema and page component. That is a simple single form implementation. The others are more complicated because they involved a collection of form instances.

                  dobbel 2 Replies Last reply Reply Quote 0
                  • dobbel
                    dobbel @dgk last edited by

                    @dgk Yes I would greatly appreciate if you took some time to document and share this new form builder with us!

                    1 Reply Last reply Reply Quote 0
                    • dobbel
                      dobbel @dgk last edited by

                      @dgk Hi, your form builder repo is offline 😞

                      1 Reply Last reply Reply Quote 0
                      • D
                        david_bp last edited by david_bp

                        I’ve been evaluating schema-based form generators too, as I want to move from server-generated DOM to a JSON serializaton of forms and their rules, so we can offer a better mobile experience, offline, etc. We have hundreds of fields in a form, dozens per “page”, with potentially a lot of business rules.

                        • Vue-Form-Generator is not really maintained and doesn’t look like it quite made it to the next version. It also bakes in Bootstrap UI.

                        • Vue Form JSON Schema looks promising, but I wish it was a little more “automatic” and less verbose. Last updated 5 months ago or so?

                        • JSONForms (https://jsonforms.io/) I just came across. I think they recently added Vue support (was originally Angular and React). It uses Material as the UI styling. But it has some neat features like defaulting a UI Schema for you based on the data Schema. I like some of their dependent fields (if Yes, show/require this other field) stuff, and I like how using this would abstract us from Vue, in case we have to use React in some context in the future.

                        • Vue Formulate has a newer generate-from-schema option (https://vueformulate.com/guide/forms/generating-forms/), but currently lacks much of the repeater/validators that the “statically-defined in template” method offers.

                        • BlitzarForm (https://blitzar.cycraft.co/docs/blitz-form) is a new effort that also allows any component, so all Quasar components could be used.

                        For something more than a pet project, I’m nervous to “place a bet” on what would be used by my company for years to come!

                        1 Reply Last reply Reply Quote 1
                        • First post
                          Last post