CodexBloom - Programming Q&A Platform

Angular 14 - how to to Capture Form Control Value Changes After Resetting FormGroup

๐Ÿ‘€ Views: 34 ๐Ÿ’ฌ Answers: 1 ๐Ÿ“… Created: 2025-06-03
angular reactive-forms formgroup typescript

I'm writing unit tests and I'm confused about I'm following best practices but I'm working on an Angular 14 application where I have a reactive form consisting of multiple fields. I've noticed that after I call `formGroup.reset()` to clear the form, I need to seem to capture changes to the form controls anymore. The form control value changes aren't being detected by the `valueChanges` observable. Hereโ€™s the code where I set up my form and listen for changes: ```typescript import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; @Component({ selector: 'app-my-form', templateUrl: './my-form.component.html', }) export class MyFormComponent implements OnInit { myForm: FormGroup; constructor(private fb: FormBuilder) {} ngOnInit() { this.myForm = this.fb.group({ name: [''], age: [''] }); this.myForm.valueChanges.subscribe(values => { console.log('Form changes:', values); }); } resetForm() { this.myForm.reset(); } } ``` When I call `resetForm()`, the console stops logging changes to the form controls. I checked that the `valueChanges` subscription is still active, but it seems like it doesn't emit any values after the reset event. I tried manually triggering change detection by injecting `ChangeDetectorRef`, but that didnโ€™t resolve the scenario either. I also noticed that if I set a default value for the form controls when calling `reset()` like this: ```typescript this.myForm.reset({ name: '', age: '' }); ``` I still donโ€™t see changes being emitted until I set a value manually in the UI. Do I need to manage the state differently after resetting the form? What might be causing this behavior? For context: I'm using Typescript on Windows. Has anyone else encountered this? Has anyone dealt with something similar? The project is a mobile app built with Typescript. Any examples would be super helpful. I'm working with Typescript in a Docker container on Ubuntu 20.04. Any ideas how to fix this?