Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jan 20 13:31
    aitboudad closed #3141
  • Jan 20 13:31
    aitboudad commented #3141
  • Jan 20 11:10
    mithunvenkatesh18 labeled #3141
  • Jan 20 11:10
    mithunvenkatesh18 opened #3141
  • Jan 20 07:58
    ha-akelius commented #3138
  • Jan 19 18:11
    aitboudad closed #2917
  • Jan 19 14:20
    aitboudad labeled #3103
  • Jan 19 14:20
    aitboudad unlabeled #3103
  • Jan 19 13:55
    aitboudad commented #3118
  • Jan 19 13:54

    aitboudad on v5

    demo: update stepper validation… (compare)

  • Jan 19 13:54
    aitboudad closed #3140
  • Jan 19 13:54
    aitboudad edited #3140
  • Jan 19 13:51
    netlify[bot] commented #3140
  • Jan 19 13:49
    aitboudad opened #3140
  • Jan 19 13:46
    aitboudad commented #1981
  • Jan 19 13:41
    aitboudad commented #2842
  • Jan 19 13:34

    aitboudad on main

    feat(core): add support of stri… (compare)

  • Jan 19 13:34
    aitboudad closed #3139
  • Jan 19 13:34
    aitboudad closed #2842
  • Jan 19 13:31
    netlify[bot] commented #3139
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.
I can provide a code example, if asked.
I tried (ngModelChanges) it formats the value but not the field/model that is passed to this component.
I want to parse the date value to MM/DD/YYYY that users enters in the input field. Its a custom component. I also want to show a error message and empty the input field content if user enters invalid date format. How to achieve this? @aitboudad
farakk
@farakk

@aitboudad. Please I am getting error => TypeError: validatorOption.validation is not a function. Because we are not passing ['ip'] for validation. We are using cutom type and JSON externally, and we do not want IpValidator function. See below that actually worked in stackblitz after we edited to what we want and we removed all references to IPValidator- check @farakk/angular-vkbvjn here https://stackblitz.com/edit/angular-vkbvjn?file=app%2Fapp.component.ts But it is not working in our code {
"key": "cust",
"type": "custom",
"templateOptions": {
"label": "Custom Name",
"type":"text",
"required": true

},
"validation": {
"messages": {
"required": "Please tell us your zip code!"
}
},
"validators": {
"ip2":
{
"expression": "\control => \/\d{5}\/\.test(control\.value)\",
"message": "Not a valid IP Address"
}
}
}
ngOnInit() {
if (this.field.validators) {
JSON.parse(JSON.stringify(this.formControl
.setValidators(JSON.parse(this.field?.validators?.validation))));

Abdellatif Ait boudad
@aitboudad
@farakk the expression property does not accept a string value
farakk
@farakk
@aitboudad Thanks for responding. Maybe you can make that happen in the future. Happy holiday
Dominic Watson
@intellix
when I do a control.setValue(something) it's running validation and I can't for the life of me figure out how to mark the field as untouched:
phoneCtrl.setValue(value);
phoneCtrl.markAsPristine();
phoneCtrl.markAsUntouched();
Abdellatif Ait boudad
@aitboudad
@intellix markAsUntouched should work I think, I may help if you could provide a reproduction
1 reply
farakk
@farakk
@aitboudad I am trying not to show anything when I move to say step 3 in a stepper with 4 steps. I just want to see the PREVIOUS NEXT buttons at the bottom. So I can use only the bottom NEXT button to move to step 4
Dominic Watson
@intellix

I'm trying to create a "Master Checkbox" which allow you to toggle/untoggle checkboxes inside it: https://stackblitz.com/edit/ngx-formly-ui-material-bs8vzf?file=src%2Fapp%2Fapp.component.ts - it's rendering them fine but I'm getting an error in console:

control.registerOnChange is not a function

Dominic Watson
@intellix
I think the problem is formControl on the parent/master checkbox
Dominic Watson
@intellix
ok I solved it by removing the formControl :)
farakk
@farakk
I am trying NOT to show anything apart from NEXT button when I move to say step 3 in a stepper with 4 steps. I just want to see the PREVIOUS NEXT buttons at the bottom. So I can use only the bottom NEXT button to move to step 4
Abdellatif Ait boudad
@aitboudad
@farakk not clear, you may check our stepper example https://formly.dev/examples/advanced/multi-step-form
Jörg Vanderhoeven
@jvdhoeven

hello all, first of all thanks for your great library and your efforts!

Is there a way to extend/modify the model within a custom template?

i have different data that all has the same field with its translation texts. but the list of translation texts are not always complete. But in the UI i always want to show the complete list of languages, so the user can fill the missing translation texts.

list of languages:

{
  languages: [
    'de', 'en', 'fr', 'es'
  ]
}

initial model example:

{
  someItem: 'foo',
  descriptions: {
    { locale: 'en', value: 'English value' },
    { locale: 'de', value: 'Deutscher wert' }
  }
}

should get modified into

{
  someItem: 'foo',
  descriptions: {
    { locale: 'en', value: 'English value' },
    { locale: 'de', value: 'Deutscher wert' },
    { locale: 'fr', value: '' },
    { locale: 'es', value: '' }
  }
}

I thought that I could build a custom template that gets the translation texts as a model and then extends the model with the missing languages so that they can get filled over the UI. I used a FieldArrayType for descriptions and tried to add items on ngOnInit within the tempalte, but this does throw errors.

Is this even possible or is this the wrong approach?

I guess the another approach would be to enhance the original model from outside, but just wanted to ask. Thanks in advance!

abhip5369
@abhip5369
Hi All,
Is it possible to have paginator with formly repeat section ? I have implemented it, but there seems to be some weird issue when I change the page : https://stackblitz.com/edit/angular-ap3aic-cqfvgi?file=src/app/repeat-section.type.ts
smohanui
@smohanui

Hi all,
I am using formly for form building. In the form on submitting will redirect to preview view, In the form
`<div *ngIf="!showData">
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<formly-form [form]="form" [model]="model" [fields]="fields">
</formly-form>
<button type="submit" color="primary" mat-raised-button> Submit </button>
<button type="reset" color="warn" mat-raised-button> Reset </button>
</form>
</div>

<div *ngIf="showData">
{{model | json}}
<button type="button" (click)="edit()">edit</button>
<button type="button" (click)="onOk()">ok</button>
</div>`

And .ts :
`onSubmit() { this.showData = true; }

edit (){ this.showData = false; }

onOk (){
this.showData = false;
if (this.form.valid) {
alert(JSON.stringify(this.model, null, 2));
}
this.options.resetModel(); } `

submit > Ok => formdata is resetting
submit > Edit > submit > Ok => formdata is not resetting
Required to reset data in both above cases. how to acheive it?
For reproduction : stackBlitz

Abdellatif Ait boudad
@aitboudad
@abhip5369 seems there a bug somewhere 🤔, could you please fill an issue in Formly repo
@jvdhoeven why not just extend the model first before passing it to Formly
Abdellatif Ait boudad
@aitboudad
@smohanui you've missed passing options input to formly-form:
<formly-form
  [form]="form"
  [model]="model"
  [fields]="fields"
+  [options]="options">
</formly-form>
abhip5369
@abhip5369

@abhip5369 seems there a bug somewhere 🤔, could you please fill an issue in Formly repo

Sure @aitboudad

abhip5369
@abhip5369

@abhip5369 seems there a bug somewhere 🤔, could you please fill an issue in Formly repo

As requested, ngx-formly/ngx-formly#2808. Please let me know, if I need to provide additional info & edit anything. Note: In Environment I filled : "Angular-v11 | Stackbliz" as I am not sure what to fill there.