Angular Reactive Forms: FormArray with Conditional Controls scenarios to Reset Properly on Reset() Call
I've hit a wall trying to I'm relatively new to this, so bear with me... I am using Angular 14 with Reactive Forms to build a dynamic form where users can add multiple entries via a FormArray. Each entry contains a set of fields, but I encounter an scenario when I try to reset the form using the `reset()` method. Specifically, when I conditionally add controls to the FormArray based on user input, the controls do not reset properly, and the `FormArray` retains its previous values. Here's a minimal example of what I'm working with: ```typescript this.form = this.fb.group({ entries: this.fb.array([]) }); addEntry() { const entry = this.fb.group({ name: ['', Validators.required], age: ['', [Validators.required, Validators.min(0)]], isActive: [true] }); this.entries.push(entry); } resetForm() { this.form.reset(); // This does not reset FormArray properly } get entries() { return this.form.get('entries') as FormArray; } ``` When I call `resetForm()` after adding a couple of entries and modifying their values, I expect all controls within the `FormArray` to be reset to their default values, but I still see the old values in the form. The console shows no errors, but the form does not behave as expected. I tried using `this.entries.clear();` before resetting, but that leads to losing the structure of the FormArray. What could I be missing, and how can I ensure that the FormArray resets properly? Any insights would be greatly appreciated! My development environment is Ubuntu. Any ideas what could be causing this? My team is using Typescript for this CLI tool. Is this even possible?