How do I disable field actions on specific fields?

[mediagiant]

Description: I want to allow a form to be built that includes REQUIRED default fields. I dont want the user to be able to remove or alter these fields, but should be able to add and alter any additional fields they choose.

I have tried using disabledFieldButtons, which removes them for an entire field type, instead of just a specific field. I also tried using a typeUserEvents, but that didnt work either (my attempts and example below). How do I accomplish this?

var baseform = JSON.parse('[{"type":"text","required":true,"label":"First Name","placeholder":"John","className":"form-control","name":"firstname","access":false,"subtype":"text"},{"type":"text","required":true,"label":"Last Name","placeholder":"Smith","className":"form-control","name":"lastname","access":false,"subtype":"text"},{"type":"text","subtype":"email","required":true,"label":"Email Address","placeholder":"[email protected]","className":"form-control","name":"email","access":false}]');

    var options = {
        showActionButtons: false,
        disableFields: ['autocomplete','button','file','header','starRating','paragraph','hidden'],
        disabledFieldButtons: {
          text: ['remove'], // disables the remove butotn for text fields
          select: ['edit'] // disables the edit button for select fields
        },    
        defaultFields: baseform,
        typeUserEvents: {
                text: {
                    onadd: function (fld) {
                        console.log(fld);
                        var $nameField = $('.fld-name', fld);

                        if (($nameField.val() == "firstname") || ($nameField.val() == "lastname") || ($nameField.val() == "email"))
                            $nameField.prop('disabled', true);

                    }
                }
            }
    };

    var fb = jQuery("#build-wrap").formBuilder(options);

Environment Details:

• formBuilder Version: 3.8.2
• Browser: Chrome
• OS: Win 11

[lucasnetau]

Await the formBuilder().promise and then remove (or disable) the delete and edit buttons for those fields

[V1pr]

Await the formBuilder().promise and then remove (or disable) the delete and edit buttons for those fields

Since I'm facing the same problem - and I'm not a JS expert - I thought about the following possible solutions:

1. allow subtype button removal (eg. for firstname subtype) - this seems to work, but creates invalid HTML input with type="firstname"...

            disabledFieldButtons: {
                text: {
                    firstname: ['remove', 'edit']
                },
            },

2. create a custom field type based on text and remove the buttons:

            disabledFieldButtons: {
                firstname: ['remove', 'edit'],
            },

(I'm still expirimenting with this, since the docs not 100% states how to include options, fileds/templates upon initialization, but this seems to work, but I cannot display a text input properly:

var opts = {
  fields: [{
    label: 'firstname',
   attrs: {
    ...
   }
  }],
  templates: {
    firstname: function() { ... }
  }

3. onDelete event handling ( I saw a feature request for it already)
4. await the promise, you mean this?

$('#fb-wrapper').formBuilder(opts).promise.then(formbuilder => {
     $('#fb-wrapper .formbuilder-text input.default-field').each(function() {
                            console.log('element '+this.id);
                            $(this).closest('div.prev-holder').siblings('div.field-actions').remove();
                            // this is not good, since breake the formatting
                            // $(this).parents('div.prev-holder').next('div.frm-holder').remove();
      })
});

5. using onAddFieldAfter:

onAddFieldAfter: function(fieldId, fieldData) {
                console.log(fieldId);
                console.log(fieldData);
                  // if element has a specific class - eg unremovable-field - disable controls + double click
                if ( fieldData.className.match(/\sunremovable-field/) ) {
                    $('#'+fieldId).on('dblclick', function(event) {
                        event.stopPropagation();
                    });
                    $('#'+fieldId).find('div.field-actions').remove();
                }
            }

IMHO - currently - the best is the last, but would be great to have an onRemove or onDelete event as well.

Note: the last 2 solutions builds upon having a specific class added to the desired elements