Add `group` disabled option to disable all fields within a group

[networkimprov]

Could VFG provide a prop that sets the disabled attribute on all <fieldset> elements?

e.g. props: {disable:Boolean, ...} and <fieldset :disabled="disable" ...>

EDIT: or provide a .disabled member at the schema top level, e.g.
{disabled: true, groups: [...]}
{disabled: true, fields: [...]}

Currently I do this in the parent:

mounted: function() {
   if (this.disableForms)
      this.$nextTick(function() {
         for (var aEl = this.$refs.vfg.$el.firstChild; aEl; aEl = aEl.nextSibling)
            if (aEl.nodeType === 1 && aEl.tagName === 'FIELDSET')
               aEl.disabled = true;
      });
},

[zoul0813]

If you use the "groups" functionality, you can provide the styleClasses in the group schema, VFG will update the form if the schema is modified ... so this would support that.

{
  groups: [
    {
      legend: 'optional',
      styleClasses: 'disabled',
      fields: [ ... ]
    }
  ]
}

You won't have access to the "disabled" attribute, but can alter the CSS classes to simulate a disabled state (the fields themselves could also then be disabled/readonly as well).

So, instead of modifying the DOM directly as you do in your example, you can alter the schema passed to VFG and provide a "disabled" CSS class that can be styled to alter the appearance of the fieldset (or whatever tag you use) to give a visual indication of the disabled status ... and then update any of the fields within the group and toggle their disabled state to true, which will mark them as disabled and prevent the user from interacting with them directly.

[networkimprov]

Simulating disabled state with CSS is also a hack, and at least as much code as the mounted method :-)

Revising the schema to set .disabled in every member of every group is less of a hack, but not much less code.

I believe a "disable" prop is the best solution, so I hope you'll leave this issue open.

[zoul0813]

Updating the schema to disable the fields is not a hack, it’s how VFG handles disabling fields. The CSS modification wasn’t intended to reduce the code size, and was meant as more of a future proof option, as your current code is nesting and relies heavily on the structure of VFG, which can change with any release (including patches) as this type of code is considered bad form.

The CSS option was so you could provide a fieldset level presentation of the group being disabled, which is really the only reason I can see setting the fieldset disabled value.

VFG also does not require you to use the fieldset tag, so a group level disabled attribute would not be useful to anyone who isn’t using fieldset, and is unlikely to be introduced. However, I could see a group level disabled property that affects all child fields within the group, to simplify the process when wanting to disable a specific group.

[networkimprov]

Now I have this; rather inelegant.

   if (this.disableForms) {
      if ('fields' in aDef)
         aDef = {groups:[aDef]};
      for (var a in aDef.groups)
         for (var a1 in aDef.groups[a].fields)
            aDef.groups[a].fields[a1].disabled = true;
   }

Which has the irritating side effect of italicizing <label> (?!) requiring a CSS !important fix :-(

Alternatively to a new prop, a .disabled member at the schema top level would be welcome, e.g.
{disabled: true, groups: [...]}
{disabled: true, fields: [...]}