Angular-QueryBuilder
Angular-QueryBuilder copied to clipboard
How to create querybuilder which has dynamic fields
I need the behavior for my project where the conditions is dynamic. It depends on the selection in the first field. And the input fields are customized fields I couldn't find example related to this. Please can you help
@SathyaramSoni I've done something like this, I create a dialog to show the query builder, so in the edit action, I call a function to get the fields from the DB through the rest API and pass to the queryconfig of the component in the UI.
private async getFields(realmCode: string, ruleSetCode: string) { let inputs: CriteriaInput[] = (await this.odinService.getCriteriaInputs(realmCode, ruleSetCode)).content; if (!inputs || inputs.length === 0) { return null; } return inputs.reduce((index, input) => ({ ...index, [input.path]: {name: input.display, type: input.type} }), {}); }
public async edit(rule: Rule, criteria: Criteria) { this.isOpen = true; this.rule = rule; this.criteria = criteria ? criteria : this.getNewCriteria(this.rule); this.fields = (await this.getFields(this.rule.realmCode, this.rule.ruleSetCode)); this.formControl = this.formBuilder.control(this.query); this.queryBuilderConfig = {fields: {...this.fields}}; }