Multi step form with same model object

[GetTaxSolutions]

I'm using your example and have two fields which point to same key in model but they are in two different steps in wizard. When I fill first one It have to update input field in second step as well but it's not. When try to write something in second step it update exact same property in model.
Example /field 'First name *' in first and second steps in the wizard/ :

https://stackblitz.com/edit/angular-p5rqay?file=src/app/app.component.html

[aitboudad]

unfortunately that's an angular issue angular/angular#13792, not sure how it can be solved.
for now you can use the following workaround https://stackblitz.com/edit/angular-p5rqay-mvw7vu

[GetTaxSolutions]

Thank you for your info. I tried workaround, it populated two properties in model but in second step the field is empty again. May be have to wait to be fixed in angular.

[aitboudad]

the angular fix may take a long time, you may remove the extra property before submitting your form instead.

[flobiber]

@aitboudad if i have a look on your workarround, i don't see that this is working. If i go to the second step of your wizard, the name field is empty

[aitboudad]

@flobiber updated the example, using *ngIf solve the issue without using my workaround
https://stackblitz.com/edit/angular-p5rqay-mvw7vu

[flobiber]

@aitboudad Okay i think i miss understand the original problem. My problem is more like this:
https://stackblitz.com/edit/angular-p5rqay-mlucvv?file=src/app/app.component.ts

[aitboudad]

you may use the following workaround https://stackblitz.com/edit/angular-p5rqay-hkrc18 for now until angular team fix that issue

[aitboudad]

@flobiber updated my workaround, based on angular/angular#13792 (comment) https://stackblitz.com/edit/angular-p5rqay-hkrc18

[aitboudad]

@flobiber I've pushed a fix in v5.5.0 so the workaround is not necessary anymore 😄!

https://stackblitz.com/edit/angular-p5rqay-hkrc18

[paritosh291219]

Can i use customise model in multi step formly field.
For eg when I clicked submit button i want to fill my own model. I want to fill value in defaultValue in formlyfieldconfig

[instantgis]

My forms work in distinct Edit and Search modes. it defaults to search mode.
In Search mode I use a date range picker for a date field.
In Edit mode I want to use a date picker instead for the same field.
I want to use the same key names.

The idea is I'd hide/show the different controls based on edit mode.

I tried this..

https://stackblitz.com/edit/ngx-formly-duplicate-keys?file=src%2Fapp%2Fapp.component.ts

And it appears to work. However there is something that does not make sense...

toggle() {
this.editMode = !this.editMode;
console.log(this.editMode);
this.fields[0].hideExpression = this.editMode;
this.fields[1].hideExpression = !this.editMode;
// ??
// this.fields.forEach(f => (f.hideExpression = this.editMode));
}

Why did I have to invert the hideExpressions for the different fields?

Why does this not work?
this.fields.forEach(f => (f.hideExpression = this.editMode));

What am I doing wrong?

[aitboudad]

@instantgis it's just an example, you can also make it globally by using formState with the combination of custom extension

[yoganantham-web]

@GetTaxSolutions @aitboudad
I fixed this issue.
Please use like below.

fields: FormlyFieldConfig[] = [{
    type: 'tabs',
    fieldGroup: [
      {
        **key: "Personal data",**                      ### _Insert key here (tab label)_
        templateOptions: { label: 'Personal data' },
        fieldGroup: [
          {
            key: 'firstname',
            type: 'input',
            templateOptions: {
              label: 'First name',
              required: true,
            },
          },
          {
            key: 'age',
            type: 'input',
            templateOptions: {
              type: 'number',
              label: 'Age',
              required: true,
            },
          },
        ],
      },
      {
        **key: 'Destination',**           ### _Insert key here (tab label)_
        templateOptions: { label: 'Destination' },
        fieldGroup: [
         {
            **key: 'firstname',**                     ### _Duplicate field_
            type: 'input',
            templateOptions: {
              label: 'First name',
              required: true,
            },
          },
          {
            key: 'country',
            type: 'input',
            templateOptions: {
              label: 'Country',
              required: true,
            },
          },
        ],
      },
      {
        templateOptions: { label: 'Day of the trip' },
        fieldGroup: [
          {
            key: 'day',
            type: 'input',
            templateOptions: {
              type: 'date',
              label: 'Day of the trip',
              required: true,
            },
          },
        ],
      },
    ],
  }];