Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Dec 08 18:33
    abhihotmail commented #3087
  • Dec 08 17:43
    netlify[bot] commented #2326
  • Dec 08 17:37
    aitboudad reopened #2965
  • Dec 08 17:35
    renovate[bot] edited #2326
  • Dec 08 17:34
    renovate[bot] synchronize #2326
  • Dec 08 17:33
    aitboudad closed #2992
  • Dec 08 17:33

    renovate[bot] on configure

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

  • Dec 08 17:33
    aitboudad closed #3091
  • Dec 08 17:33

    aitboudad on main

    docs(demo): use stackblitz sdk … (compare)

  • Dec 08 17:30
    netlify[bot] commented #3091
  • Dec 08 17:23
    aitboudad commented #2994
  • Dec 08 17:22
    aitboudad closed #2994
  • Dec 08 17:19
    aitboudad opened #3091
  • Dec 08 17:13
    aitboudad closed #3082
  • Dec 08 17:13

    aitboudad on v5

    fix(material): remove mat-form-… (compare)

  • Dec 08 17:13
    aitboudad closed #3090
  • Dec 08 16:50
    netlify[bot] commented #3090
  • Dec 08 16:47
    aitboudad opened #3090
  • Dec 08 16:42
    aitboudad labeled #3082
  • Dec 08 15:04
    abhihotmail commented #3087
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.
1 reply
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?
1 reply
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
bpetex
@bpetex
@aitboudad I was wondering the intended use case of prepopulate. I myself always used that to extend the fieldgroup of formarray. But I was checking the codebase and then the core extenstion that calls buildForm runs before that, so in that I'd have to call _buildForm again with the field. So my question is what is the intended usecase of prepopulate in a custom content ? And my other question is, is there a recommended way of doing what I described above without rerunning buildForm?
1 reply
Johnny Mariéthoz
@jma
Hello I'm not sure that is a bug or a bad implementation from my side. When I try to hide/show a field of type array this field is marked as touched. Here is an example: https://stackblitz.com/edit/angular-e9ng4s?file=src/assets/json-schema/arrays.json try to enter a name for a car push the hide button twice and see the console. Note that form cannot be submitted. Thanks in advance.
7 replies
Johnny Mariéthoz
@jma
Maybe, you can be interested by the use of ngx-formly in our open source project. Here is the customisation code in our angular library: (https://github.com/rero/ng-core/tree/staging/projects/rero/ng-core/src/lib/record/editor), the main project page: (https://github.com/rero/rero-ils#what-is-rero-ils) and a video presentation (https://www.youtube.com/watch?v=uyG-V_ffJ8k) of our editor at the Semantic Web in Libraries Conference (https://swib.org/swib21/).
3 replies