Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Nov 26 09:24
    aitboudad closed #3063
  • Nov 26 09:24
    aitboudad commented #3063
  • Nov 26 06:49
    renovate[bot] edited #2326
  • Nov 26 06:23
    johngamble commented #3063
  • Nov 26 06:11
    johngamble commented #3063
  • Nov 26 04:31
    johngamble labeled #3063
  • Nov 26 04:31
    johngamble opened #3063
  • Nov 25 22:08
    netlify[bot] commented #2326
  • Nov 25 21:52
    renovate[bot] edited #2326
  • Nov 25 21:52
    renovate[bot] synchronize #2326
  • Nov 25 21:52

    renovate[bot] on configure

    chore(deps): add renovate.json (compare)

  • Nov 25 21:51

    aitboudad on main

    feat: upgrade to angular v13 (#… (compare)

  • Nov 25 21:51
    aitboudad closed #3062
  • Nov 25 21:51
    aitboudad closed #2958
  • Nov 25 21:51
    aitboudad closed #2701
  • Nov 25 21:51
    aitboudad closed #3053
  • Nov 25 21:51
    aitboudad closed #3049
  • Nov 25 21:45
    aitboudad edited #3062
  • Nov 25 21:45
    netlify[bot] commented #3062
  • Nov 25 21:37
    aitboudad synchronize #3062
Abdellatif Ait boudad
@aitboudad
@glauberfunez_twitter that's a bug, please fill an issue in our repo
Glauber Funez
@glauberfunez_twitter
alright, i will do that.
Is the v6.0.0-next.1 version in your opinion stable enough to be used in production?
Glauber Funez
@glauberfunez_twitter
Abdellatif Ait boudad
@aitboudad
@glauberfunez_twitter it may contain some regression so I would wait until the beta version at least unless you need some of its features
Glauber Funez
@glauberfunez_twitter
I actually have scenarios that have very large objects nested, which in v5 doesn't work properly and in v6 after upgrading, it worked the first time.
example using FieldArrayType, if I call this.add() create the new position in the model, I can see it debugging, but it doesn't reflect to this.form.value for example.
seems to create only in this.model
Abdellatif Ait boudad
@aitboudad
@glauberfunez_twitter v6 is better than v5 in terms of performance, so the this.form.value is populated with a delay in v5 if I'm not wrong.
Glauber Funez
@glauberfunez_twitter
@aitboudad Yes, I really liked V6, but as I found some problems, I'm going to go back to v5 and leave V6 in another branch so I can keep up with the progress and test.
Another detail I observed in V6, blocks where in v5 it was hidden when it had no defined value, now in V6 it appears, for example the field does not appear, but the structure appears, hence the blank space where the field would occupy if it was visible on the screen .
Abdellatif Ait boudad
@aitboudad
@glauberfunez_twitter don't hesitate to report any issue related to those regressions, they are really helpful and will allow us to fix them before the final release.
Glauber Funez
@glauberfunez_twitter

@aitboudad That was my problem that made me go to V6, but I had to go back to V5.
I don't know if you have any idea what it could be.
ngx-formly/ngx-formly#2962

Remember that even some previous versions this worked, but I don't remember the version and migrating to v6 also works, so I believe it must be a bug in the library

Glauber Funez
@glauberfunez_twitter
@aitboudad Any suggestions on how to work around this issue until v6 is officially released ?
Robert
@wobbince
Hi, I'm trying to add a cascading select inside a repeater.
However, whenever I click add it is nulling out previously selected values. Am I missing something trivial here?
Here is an example: if anyone can point out what I am missing I'd be very grateful. Thanks
Robert
@wobbince
Sorry, this is the right link https://stackblitz.com/edit/angular-n7s2u6. If you add one and use the cascading selects then click add another, the team and player are reset but they stay set in the model
Gyan Satapathy
@gyansatapathy
Hi, I want to have a validator at the form level. Such that if any of the fields value change or if we add a repeat section the validator should be called
is there any way to do this?
Abdellatif Ait boudad
@aitboudad
Robert
@wobbince
Awesome thanks!
Nitin
@thenm
I am trying to create a typeahead referring this https://stackblitz.com/edit/angular-ngx-formly-typeahead-t7me2u
For static data I am getting the data but for the http request I am getting the result. In filtered array there are results.
pushTypeaheadSearchFormatField(element: any, index: any) {
    this.formFields.push({
      'key': element[index].name,
      'wrappers': ['labelWrapper'],
      'type': 'typeahead',
      'defaultValue': element[index].defaultValue,
      'templateOptions': {
        'type': 'typeahead',
        'key': element[index].name,
        'label': element[index].displayName,
        'required': element[index].isRequired && element[index].isRegulatoryRequirement ? false : element[index].isRequired,
        'isRegulatoryRequirement': element[index].isRegulatoryRequirement,
        'dependencyRules': element[index].dependencyRules,
        'showLookupNotice': element[index].isOptionRequired,
        'optionsUrl': element[index].optionsUrl,
        'changeExpr': 'this.getData($event, field)',
        'isregularatoryProduct': this.isregularatoryProducts(element[index].name),
        'placeholder': 'Typeahead States',
        'search$': (term) => {
          if (term && term.length > 2) {
            this._http.get<any>(AppConstants.wkApiUrl.producerCode).subscribe(result => {
              const product = result.paginationData.map(key => key['name']);
              const filteredProduct = product.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10);
              return of(filteredProduct);
            })
          } else {
            return of([]);
          }

          // const states = this.states.map(key => key['name']);

          // if ((!term || term === '')) {
          //   return of(states);
          // }

          // return of(states.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1));

        },
      },
    });
  }
Faizal
@faizu88
Can somebody help me...
https://stackblitz.com/edit/angular-vkyxwc?file=src%2Fapp%2Fapp.component.ts
The form valid state seems to be not working. It will only work if we check the form state inside the setTimeout
Why this is happening?
Abdellatif Ait boudad
@aitboudad
@faizu88 the form is not constructed yet during on init, we may provide an output to get notified once the form is built, in the meantime, you may use the following workaround https://stackblitz.com/edit/angular-vkyxwc-qgwfdt?file=src/app/app.component.ts
Faizal
@faizu88
@aitboudad Thank you!!
ildibicaku
@ildibicaku
Hello everyone. I was trying have add-ons with different options for one input , is it possible ?
mattpenner
@mattpenner
I'm trying to setup a form where there can be a customizable number of groups and a customizable number of fields within each group. Is it possible to have a repeat within a repeat? I'm new to formly and I can't quite puzzle through setting this up.
mattpenner
@mattpenner
Using the repeat template example I was able to successfully put a repeat within a repeat. One goal of our project is to allow groups within groups (i.e. hierarchy of subgroups). For that I believe I need to dynamically add a field object to the field config array. Right now I have the groups and fields within the groups hardcoded in the field config array, allowing for only one level of groups with an infinite number of fields within each group.
mattpenner
@mattpenner
Is it possible to pass data and events from a custom type to a wrapper? I have a repeated section type, but I want to stylize the layout and formatting of the repeated fields. So I have created a custom wrapper for the repeated fields. I want to put the remove button inside the wrapper. I need to pass the index to the wrapper and emit the click event back to the repeated section. Is this possible?
BukicMicko
@BukicMicko

Hey @aitboudad . I am trying to change options from select field depending on another select. For example when user select some country, states for that country to be populated.

I am using Custom Extension with following code:

 prePopulate(field: FormlyFieldConfig): void {
        const to = field.templateOptions || {};
        if (!to.lookup || (to.options && !to.lookupDependent)) {
            return;
        }

        field.templateOptions = {
            ...(field.templateOptions || {}),
            options: this.lookupService.getLookup(to.lookup),
        };

        if (to.lookupDependent) {
            field.hooks = {
                onInit: (field: FormlyFieldConfig) => {
                    if (field.parent.form.controls && field.parent.form.controls[to.lookupDependent]) {
                        field.templateOptions.options = field.parent.form.controls[
                            to.lookupDependent
                        ].valueChanges.pipe(
                            startWith(field.model[to.lookupDependent]),
                            switchMap((controlValue) => {

                                return controlValue
                                    ? this.lookupHelperService.updateLookups(field.id, controlValue)
                                    : [];
                            })
                        );
                    }
                },
            };
        }
    }

But with this approach i am getting options.map is not a function (when i checked options i saw it is object (first object from lookups and not array of objects...). Here is my yaml config for those two fields:

- templateOptions:
          label: Section 2 Please provide the following contact information
        fieldGroupClassName: row
        fieldGroup:
          - className: col-sm-6 form-group
            key: country
            type: select
            id: countries
            templateOptions:
              required: true
              translate: true
              lookup: countries  
              label: Country
              valueProp: key
              labelProp: value
          - className: col-sm-6 form-group
            key: state
            type: select
            id: states
            templateOptions:
              required: true
              translate: true
              lookup: states
              label: Request Category
              valueProp: key
              labelProp: value  
              lookupDependent: country  
              placeholder: Select state
BukicMicko
@BukicMicko
Ah.. I just needed to user mergeMap instead of switchMap... :) Anyway @aitboudad do you think this is good approach for this kind of scenario or there is better one?
Abdellatif Ait boudad
@aitboudad
@ildibicaku possible by creating a custom wrapper, you may copy the original version https://github.com/ngx-formly/ngx-formly/tree/main/src/ui/bootstrap/addons/src
@mattpenner yes possible to pass data to wrapper through templateOptions
@BukicMicko looks good if you're looking for a generic approach
Daniil Baunov
@baunov

Hello everyone,
I have a not-so-standard use-case where I need to generate formly-based control of the following structure:
Some text <some control> some text <some control> ... <...> .. (TemplateTextComponent)
Basically, sentence with form elements. Sentence and elements may be different each time.
Formly is needed here due to already registered set of controls, <some control> should be generated by formly.
And as a whole, that control Some text <some control> some text <some control> ... <...> .. should be exposed as a formly field.

So far, what I did is I created a FormlyFieldGeneratorComponent which accepts a single FormlyFieldConfig as an input and renders a whole formly-form with just that control. It implements ControlValueAccessor.
Then inside TemplateTextComponent I loop through the template segments and render controls one by one using FormlyFieldGeneratorComponent.
This does kinda work but creates some performance overhead and is sometimes causing weird bugs. And generally feels a bit hacky.

I'm wondering if there could be any better approach to achieve this using Formly? I've seen there's a formly-field component but looks like it's something internal. Not sure, maybe it can be used somehow?

Daniil Baunov
@baunov
Generally, is there anything like standalone formly-field component that can be used outside of formly-form? I.e. pass FormlyFieldConfig to it and it will just render corresponding control?
Travis Wisnasky
@twisnas
Hello All,
Is there a way to run the required validations only on the submit of a form and not onblur?
I want to make it so that if a user touches a required field an error message won't show until they click the submit button.
I see in the documentation that we can modify
modelOptions: {
updateOn: 'blur',
},
but is there a way to apply this globally rather than on each input?
Thanks!
Abdellatif Ait boudad
@aitboudad
@twisnas use a custom extension to apply it globally, see https://main.formly.dev/guide/custom-formly-extension
Travis Wisnasky
@twisnas
@aitboudad thanks! I will take a look.
Glauber Funez
@glauberfunez_twitter

@aitboudad
performance in providers.
I really like the idea of providers, but I see that triggering sometimes happens without change and that in terms of performance, it costs a lot.

See the video below, where I use providers to create a position in the field that receives a function, but just clicking on the field will trigger the event, there was no change.

I have a screen with more than 1k of fields, so just imagine this triggering all this events and there's no way to use cdk-virtual-scroll

have as inside this provider, limit it to be executed only if the value of this field has changed ?

mattpenner
@mattpenner
I feel like I'm missing something simple but I can't find it. Open to any ideas. I have a checkbox on a form that I would like disabled depending on an expression. However, when I disable it the value no longer shows in the model. I tried to replicate this on Stackblitz (https://stackblitz.com/edit/angular-djiyyl?file=src/app/app.component.ts) but it works there. I'm not sure what I'm missing, everything looks nearly the same.
mattpenner
@mattpenner
I've done some searching and it seems naturally forms do not submit disabled fields. However, Angular does have a form.getRawValues() method to include disabled field controls, which was stated by @aitboudad in formly Issue 1810 (ngx-formly/ngx-formly#1810). Yet, if you look at my stackblitz posted above the disabled values are indeed getting posted to the model. So now I'm a bit stuck because my code is indeed following what the Issue states should be happening, but the stackblitz is not. I'm fine with using CSS/ts or other methods to effectively make the checkbox read-only when necessary but if there is a valid built-in way to approach what is happening in the stackblitz example I would love to use that.
Stack 0
@StekovicN_twitter
Hei folks, quick question on https://github.com/ngx-formly/ngx-formly/issues/2532#issuecomment-832734418 any updates on this one?
Stack 0
@StekovicN_twitter
i'm facing the same issue, this workaround works and defined globally but want to avoid that... looks like on radio and multicb formlyAttributes overwrites [attr.disabled] and option disabled won't work
ivy enabled ofc