How can we override the getInputType function in angular2-query-builder

648 Views Asked by At

I'm using angular material code of angular2-query-builder in my project and I'm facing an issue where I have to dynamically change the config.field based on the selection from a previous screen. When I change the fields, I'm able to see the new fields but, the browser console throws the following error :

    QueryBuilderComponent.html:109 ERROR Error: No configuration for field 'Customer Name' could be found! Please add it to config.fields.
    at QueryBuilderComponent.push../node_modules/angular2-query-builder/dist/components/query-builder/query-builder.component.js.QueryBuilderComponent.getInputType (query-builder.component.js:228)
    at QueryBuilderComponent.push../node_modules/angular2-query-builder/dist/components/query-builder/query-builder.component.js.QueryBuilderComponent.findTemplateForRule (query-builder.component.js:165)
    at Object.eval [as updateDirectives] (QueryBuilderComponent.html:124)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:11054)
    at checkAndUpdateView (core.js:10451)
    at callViewAction (core.js:10692)
    at execEmbeddedViewsAction (core.js:10655)
    at checkAndUpdateView (core.js:10452)
    at callViewAction (core.js:10692)
    at execEmbeddedViewsAction (core.js:10655) 

Upon debugging, it is coming from QueryBuilderComponent.getInputType I want to bypass this condition and return null if field is not found:

QueryBuilderComponent.prototype.getInputType = function (field, operator) {
        if (this.config.getInputType) {
            return this.config.getInputType(field, operator);
        }
        if (!this.config.fields[field]) {
            return null; //MY CODE
            // throw new Error("No configuration for field '" + field + "' could be found! Please add it to config.fields."); // EXISTING CODE
        }
        var type = this.config.fields[field].type;
        switch (operator) {
            case 'is null':
            case 'is not null':
                return null; // No displayed component
            case 'in':
            case 'not in':
                return type === 'category' || type === 'boolean' ? 'multiselect' : type;
            default:
                return type;
        }
    };

I can't change this in QueryBuilderComponent.js file in node_modules. How can I override or customize this "getInputType" function.

1

There are 1 best solutions below

0
On

Actually, Found out the Answer myself. Just add the required changed code in ngOnInit()

ngOnInit() {

QueryBuilderComponent.prototype.getInputType = function (field, operator) {
        if (this.config.getInputType) {
            return this.config.getInputType(field, operator);
        }
        if (!this.config.fields[field]) {
            return null; //MY CODE
            // throw new Error("No configuration for field '" + field + "' could be found! Please add it to config.fields."); // EXISTING CODE
        }
        var type = this.config.fields[field].type;
        switch (operator) {
            case 'is null':
            case 'is not null':
                return null; // No displayed component
            case 'in':
            case 'not in':
                return type === 'category' || type === 'boolean' ? 'multiselect' : type;
            default:
                return type;
        }
    };
}

As it is a prototype, it will overwrite the changes