ngx-bootstrap integration

[hunguyenv]

Hello,
I'm trying to integrate ngx-bootstrap Typeahead into custom component with custom template but Form Renderer always remove [typeahead] directive.
Custom component at https://help.form.io/developers/custom-components#component-methods
My code
<input [typeahead]="states" class="form-control">
FormIO Rendered
<input class="form-control">

It would be of great help if you could advise me what to do with this.

[GMacAussie]

I believe you will need to add an accept list for the additional 'sanitized' attributes in the options block of the Formio.createForm(element, src|form, options) call:

{
    sanitizeConfig: {
        addAttr: ['typeahead']
    }
}

I don't believe this is very well documented.

[hunguyenv]

Thank you for the information.
I implemented sanitize attribute configuration
sanitizeConfig: { addAttr: ['typeahead', '[typeahead]'] }
typeahead worked but [typeahead]
FormIO removed square bracket [ ] so that Angular directive property binding does not work.
Do you have any idea if we have another way to implement angular directive into FormIO template?

[GMacAussie]

With respect to the removal of the '[]' for the attribute, I beleive FormIO uses DOMPurify to do the sanitize: https://github.com/cure53/DOMPurify. There maybe something in that config you can use to preserve the brackets.

However, my guess is that you are running into the same issue as we did, however we are using AngularJS. I will prefix the rest of this comment mentioning that I believe there is an Angular wrapper for FormIO at https://github.com/formio/angular, though I am not sure it would solve your issue.

NOTE! Everything after this is with AngularJS - you will have to take that into account for Angular.

We didn't use the old FormIO AngularJS wrapper, and had to add additonal code. The problem stems from the fact that FormIO is creating the HTML elements without the involvement of AngularJS, thus there is no AngularJS binding. We solved this as follows:

1. Add a hooks to the FormIO options block as you did above:

hooks: {
    attachWebform: self.registerWebform,    // we capture the AngularJS <ng-form> 
    attachComponent: self.manageComponent   // used to compile/remove the AngularJS control
}

2. We capture the AngularJS controller's scope and the AngularJS form (per registerWebform), along with the FormIO data block. How you do this is up to you; we use a registration call when initializing the rendering of the FormIO form;

3. Implement manageComponent, which looks like below. Note you have the chance to add attributes prior to the compile:

self.manageComponent = function (element, instance) {
    // check if the component is visible
    if (instance.visible) {
        switch (this.type) {
            case 'textfield':
                // locate the input child element
                var child = element.getElementsByTagName(instance.inputInfo.type);

                if (child.length) {
                    // must have an ng-model
                    child[0].setAttribute('ng-model', `$ctrl.data.data.${instance.component.key}`);

                    // compile the element to wire up AngularJS
                    $compile(element, null, -9999)(self.renderer.scope);

                    // we need to locate the control to update it's model
                    var controls = $filter('filter')(self.renderer.aform.$$controls, { $name: `data[${instance.component.key}]` }, true);

                    // control must be found
                    if (controls.length && self.renderer.data.data) {
                        // if null/undefined, use empty string to prevent invalid error
                        var model = (self.renderer.data.data[instance.component.key]) ? self.renderer.data.data[instance.component.key] : '';

                        // set the control's model from the data
                        controls[0].$$ngModelSet(self.renderer.scope, model);
                    }
                }
                break;
        }
    } else {
        switch (this.type) {
            case 'textfield':
                // we need to locate the control to remove from the AngularJS form
                var controls = $filter('filter')(self.renderer.aform.$$controls, { $name: `data[${instance.component.key}]` }, true);

                // control must be found
                if (controls.length) {
                    self.renderer.aform.$removeControl(controls[0]);
                }
                break;
        }
    }
}

where:

• self.renderer.data is the FormIO data block
• self.renderer.aform is the AngularJS form
• self.renderer.scope is the AngularJS controller's scope

Hope this helps!