Support for custom html attributes on all form components

[StephenOTT]

the HTML element component allows you to add custom attributes: https://help.form.io/userguide/#html-element-component

Would be great if this was available on all components.

[zackurben]

@StephenOTT do you have a specific use case for this? I would personally like more component options, rather than raw attributes, because someone could put their components in a bad state, e.g. overwrite values/defaults/checked and not know why their component is behaving strangely.

[travist]

Another thing to think about is some components have more than one HTML element included in that component and it would be hard to know which element to attach these attributes to. @StephenOTT, Which component are you looking to use this for and maybe we can make a one-off enhancement to that component.

[StephenOTT]

@zackurben the overwrite scenario is the thing i was cringing about when originally posting :)

The scenario would be: if you take the formio form and embedded it in an webpage, and that page already has additional Angular running that looks for certain attributes to replace field values. Of course you could extend/build new components that have these attributes, but for quick testing would be great to be able to add the additional attributes. Text Field, Check Box, Select, Text Area, etc. Basic fields come to mind as the easiest. @travist as you say, there are many (most if you take into account Labels), that have multiple elements. So something that could work is a Tree view of the elements and selecting a element allows you to add additional attributes. But of course this starts to make you question: "When does it make sense to just build new components" or extended existing components.

few other scenarios that come to mind but that is the simplest.

[StephenOTT]

@travist @zackurben here is simple sample code from a current example i am looking at:

<form role="form" name="form">
  <div class="form-group">
    <label for="customerId-field">Customer ID</label>
    <input required
           cam-variable-name="customerId"
           cam-variable-type="String"
           class="form-control" />
  </div>
  <div class="form-group">
    <label for="amount-field">Amount</label>
    <input cam-variable-name="amount"
           cam-variable-type="Double"
           class="form-control" />
  </div>
</form>

[StephenOTT]

@zackurben @travist any thoughts on best implementation pattern for this?

[travist]

Right now the HTML element adds each of the custom parameters using the jQuery method to do so as you see here... https://github.com/formio/ngFormio/blob/v1.8.17/src/components/htmlelement.js#L23. One thing I was thinking about was to include the HTML attribute control within all components, but include one additional parameter which would be selector. So for ALL components we would have a control similar to what we have with HTML component, but would have the following inputs.

• selector - The jQuery selector to target the element.
• attribute - The attribute to add
• value - The value of the attribute.

This could then be implemented much like you see in the HTML component, but instead include the selector as follows.

angular.forEach($scope.component.attrs, function(attr) {
  if (!attr.attr) return;
  var targetElement = angular.element(attr.selector, element);
  targetElement.attr(attr.attr, attr.value);
});

[StephenOTT]

interesting option.... that would work well for quick and more custom work.

Would you want to include a html snippet of the component's html next to the Selector,attribute,value so the person configuring knows which element to target? (You mentioned some components are more complicated and have nested elements)