👀 Views: 389 💬 Answers: 1 📅 Created: 2025-07-31

angular formarray reactive-forms typescript

I've been banging my head against this for hours. I'm working on a project and hit a roadblock. I'm currently working on an Angular 15 application where I'm using a `FormArray` to manage a dynamic list of input fields. The issue I'm facing is that newly added controls are not reflecting their values in the template as expected. Whenever I add a new control to the `FormArray`, it appears to be added correctly in the component, but the template does not show the updated values unless I refresh the page. Here’s a snippet of my component code where I’m managing the `FormArray`: ```typescript import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, FormArray } 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() { this.addItem(); } get items() { return this.form.get('items') as FormArray; } addItem() { const item = this.fb.control(''); this.items.push(item); } } ``` And here is the corresponding template: ```html <form [formGroup]="form"> <div formArrayName="items"> <div *ngFor="let item of items.controls; let i = index"> <input [formControlName]="i" placeholder="Item {{ i + 1 }}" /> </div> </div> <button (click)="addItem()">Add Item</button> </form> ``` When I click the "Add Item" button, a new input field is added to the form, but the new field does not have any two-way data binding reflecting its value in the UI until I refresh the browser. I’ve checked and confirmed that the `FormArray` is updating correctly, as I can log its value in the console and see the latest entries. I also tried using `ChangeDetectorRef.detectChanges()` after adding a new item, but it doesn’t seem to make a difference. Is there something I’m missing regarding how Angular handles changes in dynamic forms? Any insights would be greatly appreciated! This is part of a larger API I'm building. Is there a better approach? What would be the recommended way to handle this? For reference, this is a production microservice.