Form controls are not removed in below scenario

[kanth609]

Description
Form controls are not being removed from form when i try to remove them dynamically

Minimal Reproduction
Navigate to the below stackblitz link

1. click on add field, you will see the added controls in UI.
2. now remove some of them.
3. you will still see the controls in the form, which is not expected i feel. as soon as i remove and trigger build option, it should get removed from the control.

https://stackblitz.com/edit/angular-9udlh5-1nswgg4l?file=package.json

You can see in image, that the controls are not removed even if there are no fields in the UI.

[kanth609]

@aitboudad would you mind checking this pls.

[kanth609]

@aitboudad can you please help here on checking this issue. thanks!

[Moander2243]

@kanth609 I had a similar problem and noticed that it's because Formly doesn't automatically update the form if the fields changes. Don't know if my solution is the cleanest one, but what you can do is recreating the Form before you are generating the fields. So in your case insert it at the top of the addField method

  addField() {
    this.form = new FormGroup({});
    let field = this.fields[0];
    let key = `Field ${field.fieldGroup.length}`;

[kanth609]

@Moander2243 thanks for the suggestions, this is a good solution if we have a minimal fields in a form, but in my case we are using formly extensively with custom types and have many fields, so i feel it will be hard if we reset the form group for larger forms.