Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • May 27 17:45
    aitboudad commented #3315
  • May 27 17:45
    aitboudad commented #3315
  • May 27 17:44
    aitboudad commented #3313
  • May 27 17:44
    aitboudad commented #3302
  • May 27 17:42
    aitboudad commented #3314
  • May 27 17:36

    aitboudad on v6.0.0-beta.2

    (compare)

  • May 27 17:36

    aitboudad on main

    fix(material): add null check f… fix(core): keep display: none f… fix(bootstrap): updates dirty s… and 3 more (compare)

  • May 27 17:17

    aitboudad on v5.12.3

    (compare)

  • May 27 17:17

    aitboudad on v5

    chore(release): 5.12.3 (compare)

  • May 27 17:14

    aitboudad on v5

    fix(bootstrap): updates dirty s… (compare)

  • May 27 17:09
    aitboudad closed #3302
  • May 27 17:09

    aitboudad on v5

    fix(bootstrap): updates dirty s… (compare)

  • May 27 17:04
    VenkataPakalapati commented #3315
  • May 27 17:01
    VenkataPakalapati commented #3315
  • May 27 16:45
    aitboudad closed #3313
  • May 27 16:45

    aitboudad on v5

    fix(core): keep display: none f… (compare)

  • May 27 16:35
    aitboudad closed #3315
  • May 27 16:34

    aitboudad on v5

    fix(material): add null check f… (compare)

  • May 27 16:26
    aitboudad closed #3311
  • May 27 16:26
    aitboudad commented #3311
dwelchtransitpros
@dwelchtransitpros

I have a weird error happening seemingly randomly. When I use hide expression, sometimes the field hides and I get this error:

Cannot read property 'length' of undefined at FieldExpressionExtension.push../node_modules/@ngx-formly/core/fesm5/ngx-formly-core.js.FieldExpressionExtension.toggleFormControl (ngx-formly-core.js:3012).

hideExpression: (model) => model.serviceType === 'somevalue'

It looks like it's losing the _fields attribute somehow. But it doesn't happen to all fields. I can't replicate it on plunker or anything else. Any ideas of something to check?

dwelchtransitpros
@dwelchtransitpros
Sort of figured it out. Was setting model values before the form was loaded causing the formly control builder to not add the '_fields' attribute... somehow.
BukicMicko
@BukicMicko

@aitboudad How can I exclude main wrapper for one field. For example i have two custom wrappers, one which overrides default form-field and another one.

    wrappers: [
         {
            name: 'form-field',
            component: AcWrapperFormField,
        },
        {
            name: 'form-field-inline',
            component: AcWrapperFormFieldInline,
        },
    ],

types: [
        {
            name: 'input',
            component: AcInputFieldComponent,
            wrappers: ['form-field'],
        },
        {
            name: 'textarea',
            component: AcTextAreaFieldComponent,
            wrappers: ['form-field'],
        },
        {
            name: 'checkbox',
            component: AcCheckboxFieldComponent,
            wrappers: ['form-field-inline'],
        },
       .....

What i need is only AcCheckboxFieldComponent to use form-field-inline and all other types form-field. But issue is that both wrappers are applied for AcCheckboxFieldCompoenent

image.png
Abdellatif Ait boudad
@aitboudad
@BukicMicko probably a bug, could you please fill an issue in Formly repo with a small reproduction
BukicMicko
@BukicMicko

Hm... @aitboudad i tried to create quick stackblitz example.. and seems to be working fine.... https://stackblitz.com/edit/angular-6d8efg-6iffnj?file=src%2Fapp%2Fapp.component.html.

Maybe something is messed up in my project.. will double check :)

2 replies
Ash McConnell
@AshMcConnell_twitter
Hi Folks, I've just started using formly and I'm having trouble getting any kind of custom validator to work. I must be missing something
{
                    key: 'surname',
                    type: 'input',
                    className: 'flex-50',
                    templateOptions: {
                        label: 'Surname',
                        required: true
                    },
                    validators: {
                        validation: [(something) => {
                            console.log('validating', something);
                            return false;
                        }]
                    },
                },
I only get the console message when the form first loads, but not when I change the content or blur off
Have I missed a step?
Ash McConnell
@AshMcConnell_twitter
(This is within a fieldGroup if that matters)
Ash McConnell
@AshMcConnell_twitter
Ash McConnell
@AshMcConnell_twitter
Got the issue, I was using the same form for 2 parts of the page (I thought that would work)
Stack 0
@StekovicN_twitter
Hei @aitboudad why does validation remain on the field when we re-render it to the DOM, am i doing something wrong? Made small stackblitz demo to demonstrate https://stackblitz.com/edit/angular-gpnlq9-12goss?file=src/app/app.component.ts . You can see that validation is set first field only, but it remains on second even though it does not have validation set to it... not sure if this is expected?
4 replies
Stack 0
@StekovicN_twitter
i get it, it observes the same key :/ once we change key, it changes validator and everything works fine
Stack 0
@StekovicN_twitter
how can we achieve having same key instead of doing dirty hacks? :)
anushreenk
@anushreenk
he wrapper "fieldset" could not be found. Please make sure that is registered through the FormlyModule declaration. Why i must be getting issue
Is date range picker is possible in ngx-formly
anushreenk
@anushreenk
image.png
image.png
image.png
can someone help why I am getting the error
what wrong i am doing @aitboudad
Stack 0
@StekovicN_twitter
@anushreenk wrapper: ["label"] does not exist... you just wrote it there but it is not registered... you need to make wrapper and register it like this https://github.com/ngx-formly/ngx-formly/blob/main/src/ui/bootstrap/form-field/src/form-field.module.ts
anushreenk
@anushreenk
but how its working in this exampple
anushreenk
@anushreenk
@StekovicN_twitter Thanks I have created the wrapper and included that in my module.It worked for me
BukicMicko
@BukicMicko

@aitboudad is it possible to provide functions as string for expressionProperties and then evaluate them as function where we need to use. Something like

              this.fieldConfig.hideExpression =
                 '(model: any, formState: any, field: FormlyFieldConfig) => { if (this.fieldConfig.model.value) { return !( formState.mainModel[this.fieldConfig.model.component] && formState.mainModel[this.fieldConfig.model.component] === this.fieldConfig.model.value ); } else {  return !formState.mainModel[this.fieldConfig.model.component];  } },';

Idea is to use string for expression props and then evaluate with typescript something like:
https://stackoverflow.com/questions/45153848/evaluate-typescript-from-string
thing is i need to interpolate values from this inside string like this.fieldConfig.model.value.. etc.. If i first try to execute logic simply as function and then try to stringify

this.fieldConfig.expressionProperties = JSON.stringify(this.fieldConfig.expressionProperties);

ngx formly of course complains cause we cannot use string for hideExpression.

1 reply
farakk
@farakk

@aitboudad. Please I want to click on any step and fire (selectionChange)="selectionChanged($event)".

<mat-horizontal-stepper (selectionChange)="selectionChanged($event)" #stepperauto>
<mat-step *ngFor="let step of field.fieldGroup; let index = index; let last = last;">
<ng-template matStepLabel>
{{ step.templateOptions.label}}
</ng-template>
<router-outlet *ngIf="index === selectedStep"></router-outlet>
</mat-step>
</mat-horizontal-stepper>

public selectedStep: number = 0;
steps: any[];
data : any[];
fields: FormlyFieldConfig[];

ngOnInit() {

 ////this.steps = this.route.snapshot.routeConfig.children.map(child  => { return child.path });  //breaking

this.steps = this.route.snapshot.data.children.map(child  => { return child.path }); //breaking
let step = this.field.fieldGroup[0];
this.router.navigate([step], { relativeTo: this.route });

}

selectionChanged(event: any) {
this.selectedStep = event.selectedIndex;
this.router.navigate([this.field.fieldGroup[this.selectedStep]],{relativeTo:this.route});
}

6 replies
Ash McConnell
@AshMcConnell_twitter
Hi Folks, is it possible to use formly configuration to add a directive? I tried adding it as an attribute using templateOptions, but it doesn't get picked up
Abdellatif Ait boudad
@aitboudad
@AshMcConnell_twitter not possible, Angular doesn't support that yet.
Ash McConnell
@AshMcConnell_twitter
@aitboudad thanks!
Dominic Watson
@intellix
having an issue where the this isn't correct in my expressionProperties getter
prePopulate(field: FormlyFieldConfig) {
  field.fieldGroup = [
    {
      key: 'account',
      type: 'payment-card-form',
      expressionProperties: {
        hide: () => {
          console.log(this.state);
          return this.state === 'selector';
        },
this.state is always undefined, despite being set on the class. If I set it initially, it's the initial value at construct but doesn't update
Philip
@PhilipSh
hi, anybody know how i can mark formGroup asTouched after init formly form?
i need mark invalid fields
Stefan Bakic
@sbakic
@PhilipSh It looks like you want to force validation on init form. Check this https://formly.dev/examples/validation/force-show-error
Bo
@demonbo
hello Guys, i want to ask about hideExpression in formly
is it equal to ngIf in angular or ngShow?
I'm using hideExpression and it's not remove element form DOM
Abdellatif Ait boudad
@aitboudad
@demonbo to enable that behavior set lazyRender to true, it was part of v5.10.0 release (will be enabled by default in v6)
Bo
@demonbo
@aitboudad set lazyRender in templateOption or where?
Bo
@demonbo
found where to add, thanks @aitboudad
FYI
FormlyModule.forRoot({
extras: {
lazyRender: true,
},
}),
Bo
@demonbo
@aitboudad can we set this behaviour for specific field? i do not want it apply global all formly fields
Abdellatif Ait boudad
@aitboudad
@demonbo fill an issue in Formly repo, I'll see if we can provide it in the next version
Aleix Suau
@aleixsuau
Hi all,
I've forked the repo to contribute to the docs (formlyTemplate). When running yarn demoI got a bunch of errors (e.g. Error: src/ui/primeng/checkbox/src/checkbox.module.ts:11:17 - error NG1010: Value at position 0 in the NgModule.declarations of FormlyCheckboxModule is not a reference Value could not be determined statically. or src/ui/primeng/checkbox/src/checkbox.module.ts:32:14 - error NG6002: Appears in the NgModule.imports of FormlyPrimeNGModule, but could not be resolved to an NgModule class.). Any idea of what is going on?
Thanks!
Abdellatif Ait boudad
@aitboudad

@aleixsuau not sure what's going on there 🤔, try to remove node_modules folder and use npm instead of yarn:

npm install
npm run start

the doc doesn't require running the demo, so just edit the markdown files https://github.com/ngx-formly/ngx-formly/tree/main/demo/src/app/guides in case you still having those issues

Aleix Suau
@aleixsuau
Thanks @aitboudad . I want to add an example too this is why I was trying to run the demo
Shaleen Agarwal
@shaleen76
I have created a custom element of Datepicker using https://wuschools.com/ngbdatepicker/. When the user clicks on the calendar and selects a date the date appears in YYYY-DD-MM format. I have a service contaning a formatter to format the date to MM/DD/YYYY. My question is: how can I get the value connected to the Datepicker (custom) and call my format function to format the date.