Duplication artifacts during Angular animation when using formly form with a custom type.

[dot-tb]

Description

When animating a formly form using Angular's animations, if the form is built using a custom type, using the ":leave" animation query will cause an unexpected behaviour.

When the component is loaded into the view, multiple instances of the custom type will be seen playing the :leave animation.

Minimal Reproduction

https://stackblitz.com/edit/angular-ivy-w2atun

Your Environment

• Angular version: 14.2.12
• Angular material: 14.2.7
• Formly/core version: 6.0.3
• Formly/material version: 6.0.3

[dot-tb]

Found a simple temporary css fix, making the custom type to only display when inside a formly-form tag :

formly-show-password {
  display: none;
}

formly-form formly-show-password {
  display: block;
}