Adding or editing one array item in array element also triggers valuchange on other array element(s)

[irenagroup]

We have multiple array element as property of single form group. Whenever you add/edit item on arrayfield1 it will trigger "valuechange" on arrayfield2. This does not happen when you delete field from arrayfield1.

See below example
https://stackblitz.com/edit/angular-rcxblq?file=src%2Fapp%2Fapp.component.ts
When you click on "Add another news" it will trigger valuechange on "investments" field. This is a issue for custom array elements as it triggers re-executing of whatever code we have with valuechange(in our case re-rendering of grid).

This does also happen with our environment which is
Angular: 9.1.11
ngx-formly: 5.8.0

Angular API works as expected, please find with above specific use case.
https://stackblitz.com/edit/github-uzjfch?file=src%2Fapp%2Faddformgroups%2Faddformgroups.component.ts

[aitboudad]

for a workaround use distinctUntilChanged:

this.form.get('investments').valueChanges.pipe(
+ distinctUntilChanged(),
  tap(value => ...),
)

[irenagroup]

Thanks for responding back.

I have tried to add distinctUntilChanged() however it does not filter out duplicate emits. May be it has new array instance?

https://stackblitz.com/edit/angular-rcxblq?file=src%2Fapp%2Fapp.component.ts

Just to add, this happens with all fields event though field is not an array.

[aitboudad]

ok thanks, I'm going to fix it then!

[aitboudad]

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

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

[irenagroup]

As always Awesome, thanks for the quick update!