Quasar: [Feature Request] Add a required validation in dialog prompt to require value when clicking ok button

[ajcastro]

Maybe it is a good feature if we can require the user a value in a text in dialog prompt. I am thinking like we can add something in the prompt options.

this.$q.dialog({
    title: 'Add Group',
    prompt: {
        model: '',
        type: 'text',
        required: true,  // --> this
    },
    cancel: true,
    persistent: true,
    ok: {
        label: 'Save'
    }
}).onOk(name => {
    // Save group in the backend
})

Or this is better

this.$q.dialog({
    title: 'Add Group',
    prompt: {
        model: '',
        type: 'text',
        validations: ['required'],  // --> vee-validate inspired
    },
    cancel: true,
    persistent: true,
    ok: {
        label: 'Save'
    }
}).onOk(name => {
    // Save group in the backend
})

Or we can also make it like this so we can add any validation logic:

this.$q.dialog({
    title: 'Add Group',
    prompt: {
        model: '',
        type: 'text',
        validations: [
            {
                error(value) {
                    return value.length === 0;  // no entered value
                },
                errorMessage(value) {
                    return "The group name is required".
                }
            }, 
            // ... we can add more validation
            // The error and errorMessage is analogous to the q-input's error and error-message
        ]
    },
    cancel: true,
    persistent: true,
    ok: {
        label: 'Save'
    }
}).onOk(name => {
    // Save group in the backend
})

I guess this is a good additional feature for a single input prompt dialog, to enable to validate them, instead of creating a separate component just to accomodate validations.
My instinct tells me that creating dialog components is good if you have more than one form fields, so if you just need to prompt a value, it is good to use the dialog prompt plugin.

Additional Note:
I recommend vee-validate approach because it is very simple and easy to use. It is also easier to use than vuelidate. Also vee-validate works well with q-inputs error and error-message. Vee-validate is also easy to extend and has good documentation.

[jean-moldovan]

Good question. Does not seem to be possible to validate prompt when calling QDialog programmatically. I think it would be useful to be able to abort dialog hiding from onOk handler:
https://codepen.io/anon/pen/MddQzN?&editable=true&editors=101

[smolinari]

It's also possible to offer your own component with the component option.

Scott

[jean-moldovan]

Another interesting case -> keep the dialog open until prompt is processed / saved async.
@smolinari , do you think this is too much for what the programmatic dialog should be responsible for?

I sort of agree with @ajcastro , dialog provides prompt, but does not provide a good way to process it.

Thanks!

[smolinari]

Well, you can use Vuex with the injected component by injecting $root into the root prop. I'd say, by doing that, you could process basically anything.

But, then again, if you are going that far, I would wonder why not just build your own prompting dialog component? 😄 You would then have a trimmed down, styled up reusable custom prompting dialog component. 😁

Scott

[jean-moldovan]

Maybe input prompt should not have been available for programmatic dialog in the first place, haha!

[smolinari]

Or, just use it for what it was meant for. A simple prompting input. :smile: If you need more than that, create your own component. All the tools are there!

Playing around because Quasar is so cool: https://codepen.io/smolinari/pen/PvvJOQ

Scott

[pdanpdan]

Now you can use custom components in dialog plugin.

[syonip]

I made an component for showing a prompt with input validation (including async), base on @smolinari 's codepen: https://www.npmjs.com/package/quasar-prompt-validation-dialog