Repeating section > add on submit

[pascalbe-dev]

Question
We are currently using the repeating sections within our apps. Is there a way to add items to a form array after the user has filled the form for this specific item by still dynamically rendering all the form template stuff via formly?

The user workflow should be the following:

1. Users clicks add button
2. Model dialog opens, where the user can fill out all the fields (which are part of the field config of the form array)
3. User clicks save
4. Modal dialog closes and the user can see, that the item has been added to some kind of list

Do you have an example for this kind of workflow?

I tried to get this running by passing the field.fieldArray.fieldGroup (which is the array of field configs of the field array) of a custom field array type to the modal dialog component. There I used those field configs to within a new formly form. On Submit I passed the form value to the field array custom type, where it got added to the complete form via the add method and by providing an initial value.
However, here I got 2 problems:

• When the dialog is opened for the 2nd time, all fields are marked as dirty (or touched, not sure)
• When adding to the form array, 2 value change events are triggered --> the value is first set to an empty array and then to an array with the correct items --> this produces a strange behavior within the UI

Is there a better way to tackle this workflow or do you have any suggestions in general? If required, I can create a Stackblitz.

[aitboudad]

that's a mutability issue which was solved by immutable mode:

• Weird behavior when using the same field config for different forms on the same page  #1429 (comment)
• or another way is to clone the fields before it gets initialized by formly-form component:

import clone from 'lodash.clonedeep';

export class FormDialog {
  ...
  constructor(@Inject(MAT_DIALOG_DATA) public data: any) { 
    this.model = clone(data.model);
    this.fields = clone(data.fields);
    this.form = new FormGroup({});
  }

[pascalbe-dev]

Great. The immutable setting solves the issue the touched or dirty state of the fields.

I'm still having the problem, that the form value is set twice after the dialog returns the new value, but this seems to be an issue within our app. I can not reproduce this issue with a minimal setup. It behaves correctly.

Thanks for the very quick feedback.

[aitboudad]

can you show me how you assigned the returned value to the form?

[pascalbe-dev]

Sure.

public async addElement(): Promise<void> {
    const result = await this.openElementDialog();

    if (result) {
      this.add(this.formControl.length, result);
    }
  }

When I suscribe to the value changes of the field array (this.formControl.valueChanges) to log out the new value and I add one item via the dialog, then I get tons of logs.

First of all, the fields of the new group are filled one by one (each reflected in one change), then the fields are removed again (one by one) until all fields are gone, then the new emitted value is an empty array and then all values are added again.

I'm debugging through the application trying to find the issue. It seems to be related to hide expressions. In the postPopulate handler, the field is removed right after adding it due formly thinking it should be hidden. However, I do not see, why formly wants to hide the controls.

Do you have any tips? I'm investigating further.

[aitboudad]

I think we can get rid of those unnecessary changes, for now you can rely instead on (modelChange) output

[aitboudad]

I think I may need a reproduction example of the hide expression behavior, thanks!

[pascalbe-dev]

Sure, I'll try to reproduce it in a smaller app asap.

[pascalbe-dev]

With the latest release, I no longer experience critical issues.
The model change event emits only once, so this works perfectly fine.
The value Changes observable of the control used by the field array type still emits quite often for each property being set on the list item. Check out this Stackblitz, if you are interested. I guess, this is a bit strange, but it does not cause any issues within our app.

My problem is with the hide expressions is gone and I couldn't reproduce it lately in a smaller app.
Thanks a ton for taking your time lately.

[aitboudad]

Thanks for the reproduction, I've pushed some fixes lately which solve the emits issue that will be part of the next minor release 5.5.8.

[aitboudad]

This issue has been fixed and released as part of v5.5.8 release.

Please let us know, in case you are still encountering a similar issue/problem.
Thank you!