Vuetify: [Feature Request] disable prop for v-form that disables all child input elements

[Webifi]

What will it allow you to do that you can't do today?
Disable all fields in a form with one prop

How will it make current work-arounds straightforward?
Remove need to add a disabled prop to every item on a form.

What potential bugs and edge cases does it help to avoid?
Forgetting to add a disabled prop to a given form element

[johnleider]

I really like this idea. What do you think @nekosaur ?

[nekosaur]

I like the idea, but I'll have to test it out. I'm thinking we'll have some issues with mutating props if we programatically set disabled from VForm while there's an explicit disabled prop on an input inside it.

[jacekkarczmarczyk]

I might be a good idea to add also <v-fieldset> component, it would allow to easily disable only some part of form

We may also want to wait for this https://github.com/vuejs/vue/issues/6097. With this PR we'll be able to create a parentDisabled provider (in v-form/v-fieldset) and use it in inputs (this.parentDisabled || this.disabled instead of this.disabled) regardless wether the input is inside the form or not

[johnleider]

The only problem with that @jacekkarczmarczyk is that injections are not reactive. I'd imagine you'd want to re-activate the form at some point no?

[mitar]

I would also vote for readonly and not just disable prop. In this way during form submission, while server is handling a request, I can make form read-only which has a benefit that users can copy-paste content out, if server request dies, but cannot modify anything.

Ideally, inputs with content would be read-only, while buttons and other inputs disabled.

[nekosaur]

Moving to 1.1 since it already includes a planned refactor of input components

[KaelWD]

Pushing to 1.2 so we can actually get 1.1 out this year. I did a proof of concept with #3969

[buzzzzer]

Any chance, that this feature will fall to 1.3.0 ?

[johnleider]

This is unfortunately low on triage and did not make it for 1.3. Going to add a help wanted tag if anyone wants to PR.

[ispyhumanfly]

I agree this would be a super useful feature. We have a situation where we use v-form to provide numerous "project" settings for our application. We have this concept where one can "activate" or "deactivate" a project, disallowing it to be rendered to users across the app yet still visible to admins. We wanted to make it so if in the "project settings" component of our app one toggled the projects activity using a v-switch, that, all form input elements would become "disabled". I'm curious to work on this feature as a pull request. Not 100% sure how as I've never contributed to Vuetify.

[totto357]

It seems that this feature can be created with reference to Themeable.
In that case, there are two ways to provide/inject disabled prop.
The first way is to add it to Validatable.
The second way is to create a new mixin.
Which of these is better?
In any case, components that directly use disabled prop need to be rewritten to isDisabled.

[totto357]

If do not use mixin , there is also a way to provide from v-form.

[johnleider]

We still intend to implement this but it did not make the cut for v2.0

[fimion]

At work we are about to start a new project with vuetify. We are wireframing at the moment, but if this has not been fixed by the time we start programming, I'll see if I can squeeze it into a sprint to add v-form[disabled] and also add a v-fieldset as we will likely be using such a component.

[wizardnet972]

I think the quickest way to do that is by to implement fieldset and apply the disabled styles by class like v--disabled.

[prashanth1k]

I think the quickest way to do that is by to implement fieldset and apply the disabled styles by class like v--disabled.

Do you have any examples on how to do that? I am looking for a quick way to conditionally disable multiple forms and I could not get fieldset to work.

[milost1982]

What is the status of this feature request? Will it be implemented in the next version?

[johnleider]

fixed in #10325