Ngx-formly: Whether to consider adding query expressions to the form

[smile2014]

https://github.com/zebzhao/Angular-QueryBuilder

[aitboudad]

can you elaborate please, thanks!

[smile2014]

I want to customize a query interface with query conditions，Specific interface effects can see the following link https://github.com/zebzhao/Angular-QueryBuilder

[aitboudad]

I think it's better to provide me an example to clearly understand the request, what do you expect from formly to do with QueryBuilder implementation.

[smile2014]

thank you

[aitboudad]

@smile2014 why closing ?

[smile2014]

@aitboudad I didn't think about how to express myself. I only knew that the effect I wanted was that of the page.

[aitboudad]

@smile2014 something like https://franzeal.github.io/ng-formly-designer/ ?

[smile2014]

Wait, I'll submit a demo

[smile2014]

https://stackblitz.com/edit/angular-oprfhy

In fact, I would like to express whether the query interface and ngx-formly integration

[intellix]

I was having a similar thought. Have recently invested in going full whack with formly and it looks to me to just be a Rule builder using dynamically built forms.

I could probably re-use code and expertise if I create an Expression Builder using Formly instead as the structure you're creating looks fairly simple to me.

It's essentially creating a tree of inputs to generate a model of:

export interface RuleSet {
  condition: string;
  rules: Array<RuleSet | Rule>;
  collapsed?: boolean;
}


export interface Rule {
  field: string;
  value?: any;
  operator?: string;
  entity?: string;
}

If you check the demo here. Picking different fields allows you to select a value using different form types: input, select, datepicker etc: https://github.com/zebzhao/Angular-QueryBuilder/blob/master/demo/src/app/app.component.ts#L239

Should be fairly easy to recreate using Formly and if we can create an example, it might be worth showing it in the list of examples and mentioning it over at that repository

[intellix]

Started having a bash at this: https://stackblitz.com/edit/ngx-formly-ui-material-querybuilder

My main problem is that the repeating section example (https://formly.dev/examples/advanced/repeating-section) shows how to repeat over predefined groups of fields. This is something I always wanted from Angular Forms but I'm not sure how to express a Union of Group types. A RuleSet.rules can contain an array of either RuleSet or Rule so you get nesting.

The Ruleset needs to contain 3x buttons:

• Remove Ruleset: Delete the whole ruleset
• Add Ruleset: Nest another ruleset inside this ruleset.rules
• Add rule: Add another rule inside this ruleset.rules

I feel like I can create a custom RulesetField that extends FieldArray and add either a Ruleset or Rule by passing in the model here: https://github.com/ngx-formly/ngx-formly/blob/master/src/core/src/lib/templates/field-array.type.ts#L42

But then another question is: without a discriminator, how would Formly know how to rebuild the form based on a model?

[aitboudad]

I'll provide an answer when I have time :)

[aitboudad]

But then another question is: without a discriminator, how would Formly know how to rebuild the form based on a model?

when the model change is triggered which is done using _buildForm internal calls the onPopulate hook is called which let FieldArray to adjust the passed field (we create fieldGroup based on the model length )

so in your case either adjust onPopulate to take account of rules type or use hideExpression https://github.com/ngx-formly/ngx-formly/issues/1379#issuecomment-454002138

[intellix]

Thanks for the extra push. I believe I've managed to complete it: https://stackblitz.com/edit/ngx-formly-ui-material-querybuilder

[aitboudad]

looks great good job!

[aitboudad]

and the underscore suggests I shouldn't use it? :P but not sure if there's any other API I should use

I'm still thinking that _buildForm should be improved before exposing it, but for now, you can rely on it as there is no alternative way.

[FritzHerbers]

@intellix
I just wanted to create a formly type for https://github.com/zebzhao/Angular-QueryBuilder, as I came across this thread and your StackBlitz https://stackblitz.com/edit/ngx-formly-ui-material-querybuilder.

Yours is an alternative way and for sure easier to adapt/configure to use personal formly types in the builder.

It looks very complete and a good basis for me. Just wanted to know if you made some improvements in the meantime, which you would like to share. Thanks in advance.