Angular Reactive Forms: FormArray not updating when adding new controls dynamically
I've been banging my head against this for hours. I'm sure I'm missing something obvious here, but I've looked through the documentation and I'm still confused about I'm having trouble with an Angular Reactive Form where I am trying to dynamically add new form controls to a FormArray. I've set up the FormArray correctly, and I can see that the control is being added, but when I try to access the values, it seems to return an empty array. Here's a snippet of my code: ```typescript import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms'; @Component({ selector: 'app-dynamic-form', templateUrl: './dynamic-form.component.html' }) export class DynamicFormComponent implements OnInit { form: FormGroup; constructor(private fb: FormBuilder) { this.form = this.fb.group({ items: this.fb.array([]) }); } ngOnInit(): void { this.addItem(); // Adding initial item } get items(): FormArray { return this.form.get('items') as FormArray; } addItem(): void { const itemGroup = this.fb.group({ name: ['', Validators.required], quantity: [0, Validators.min(1)] }); this.items.push(itemGroup); } submit(): void { console.log(this.form.value); // Logs empty array when adding new items } } ``` In my template, I have a button that calls `addItem()` and a submit button that logs the form values. Whenever I add an item using the button and then submit the form, the output is still showing the previous entries, but not the newly added ones. I've also ensured that I'm calling `this.items.push(itemGroup);` correctly, but the `this.form.value` only reflects the initial state. Has anyone encountered a similar problem or know how to ensure that the FormArray updates correctly? My Angular version is 16.0.0. I'm working on a service that needs to handle this. Am I missing something obvious? For context: I'm using Typescript on macOS. My development environment is macOS. How would you solve this?