Angular Reactive Forms: ValueChanges Not Triggering After FormArray Length Change
I've looked through the documentation and I'm still confused about I'm experiencing an issue with Angular's Reactive Forms where the `valueChanges` observable for my `FormArray` isn't triggering after I dynamically add or remove controls... I have set up a form to handle a list of items, and I'm trying to react to changes in the array's values. Here's a simplified version of my code: ```typescript import { Component } from '@angular/core'; import { FormBuilder, FormGroup, FormArray } from '@angular/forms'; @Component({ selector: 'app-my-form', templateUrl: './my-form.component.html' }) export class MyFormComponent { myForm: FormGroup; constructor(private fb: FormBuilder) { this.myForm = this.fb.group({ items: this.fb.array([]) }); this.items.valueChanges.subscribe(values => { console.log('Value changes:', values); }); } get items(): FormArray { return this.myForm.get('items') as FormArray; } addItem() { this.items.push(this.fb.control('')); } removeItem(index: number) { this.items.removeAt(index); } } ``` The issue occurs when I use the `addItem()` and `removeItem()` methods. The `valueChanges` observable only triggers when the controls are initialized but not when items are added or removed. I've verified that the console logs the initial value when the form is created, but subsequent changes to the FormArray do not lead to any log outputs. Am I missing something in my implementation, or is there a specific configuration needed to ensure `valueChanges` behaves as expected? I tried updating Angular to version 14.2.0, but the issue persists. Any insights would be greatly appreciated! This is part of a larger service I'm building. Any help would be greatly appreciated!