👀 Views: 69 💬 Answers: 1 📅 Created: 2025-06-12

angular reactive-forms formarray formbuilder typescript

Can someone help me understand I'm sure I'm missing something obvious here, but Quick question that's been bugging me - I'm working on an Angular 15 application where I'm using a `FormArray` to manage a dynamic list of items... I have a method to add new controls to the `FormArray`, but I'm working with the behavior 'want to read properties of undefined (reading 'length')' when I try to access the length of the `FormArray` after adding a control. The relevant code looks like this: ```typescript import { Component } from '@angular/core'; import { FormBuilder, FormGroup, FormArray } from '@angular/forms'; @Component({ selector: 'app-dynamic-form', templateUrl: './dynamic-form.component.html', }) export class DynamicFormComponent { myForm: FormGroup; constructor(private fb: FormBuilder) { this.myForm = this.fb.group({ items: this.fb.array([]) }); } get items(): FormArray { return this.myForm.get('items') as FormArray; } addItem() { this.items.push(this.fb.control('')); console.log(this.items.length); // Throws behavior here } } ``` In my HTML template, I have a button that calls `addItem()` method: ```html <button (click)="addItem()">Add Item</button> <div *ngFor="let item of items.controls; let i = index"> <input [formControlName]="i" /> </div> ``` I've verified that `items` is initialized correctly as a `FormArray`, and the `addItem` method is being called without issues, but after I add a control, when I log `this.items.length`, I get the behavior mentioned. I've also double-checked that I am using the correct imports and that the Angular Reactive Forms module is imported in my module file. I'm really confused as to why this is happening. Any insights into what could be causing this scenario? Any ideas what could be causing this?