Disabling either the 'name' or 'className' in form-editor options causes the rendered form to lose styling.

[GrimzEcho]

Description:

To simplify the options that users have when creating a form, I want to use the disabledAttrs property of the form-editor options to remove these attributes from the rendered edit controls. However, instead of merely hiding the rendered element that set these values, the attribute itself is removed from the form. In the case of className, the rendered form does not have a default class attached it. For name the rendered form control does not have a name/group assigned (e.g. radio buttons will not be linked together).

This issue is similar to #544, but is more expansive and has a smaple project for demonstration.

Environment Details:

• formBuilder Version: 2.98
• Browser: Chrome, Firefox, Edge
• OS: Windows 10, Ubuntu 18.04

Expected Behavior

When disabling a configuration attribute, I expect that the user won't be able to see or change that setting, but that the default value for the attribute will remain attached to the element (e.g. the edit control will be hidden, or otherwise non-interactable)

Actual Behavior

The attribute is completely removed from the element, breaking how the element is styled and rendered.

Steps to Reproduce

1. Open the sample project at https://codepen.io/anon/pen/bmbdBx. This was forked from the toggle demo in the official documentation.
2. Notice that the only change was the inclusion of disabledAttrs: ['name', 'className'], in the fbOptions object.
3. Run the project and add some controls to the form.
4. Click the save button to toggle the form viewer.
5. Notice that the form is no longer styled correctly (or at all).

Workaround #1

Create static style rules for the various xxx-wrap, hiding the elements. Example:

$selectors: '.className-wrap, .name-wrap, .access-wrap, .multiple-wrap, .toggle-wrap, .subtype-wrap, .step-wrap, ' +
				'.rows-wrap';

#{$selectors} {
	display: none !important;
}

Workaround #2

If you need to dynamically set which attributes are hidden, then you need to style the incoming xxx-class elements as controls are added to the form and apply the styling to existing elements (such as if you load a saved form). Either use the onadd() and onclone() hooks, or use a simple element insertion library such as insertion-query, e.g.

$(() => {
	// hide any new attributes we don't want to see
	// uses CSS3 animation to efficiently detect when new elements are added to the DOM
	const selector = '.className-wrap, .name-wrap';
	insertionQ(selector).every(elm => {
		$(elm).hide();
	});
		
	// hide the existing attributes that have already been loaded/rendered
	$(selector).hide();			
});