Angular Reactive Forms: Issues with Dynamic Form Control Removal and Validation State Management
I'm experimenting with I've been struggling with this for a few days now and could really use some help. I'm facing a challenge with Angular's Reactive Forms where I dynamically add and remove form controls, but I'm running into issues with validation states not updating correctly. When I remove a control, it seems like the validation state of the remaining controls doesn't reflect the current state. I've set up a form with multiple dynamic fields where users can enter their details. When a user removes a specific control, I want to ensure the remaining controls update their validity state. However, after removing a control, I'm getting stale validation messages and the form doesn’t seem to recognize changes adequately. Here’s a simplified version of my code: ```typescript import { Component, OnInit } from '@angular/core'; import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-dynamic-form', templateUrl: './dynamic-form.component.html', }) export class DynamicFormComponent implements OnInit { myForm: FormGroup; constructor(private fb: FormBuilder) { this.myForm = this.fb.group({ users: this.fb.array([]), }); } ngOnInit() { this.addUser(); // Add an initial user field } get users() { return this.myForm.get('users') as FormArray; } addUser() { const userGroup = this.fb.group({ name: ['', Validators.required], email: ['', [Validators.required, Validators.email]], }); this.users.push(userGroup); } removeUser(index: number) { this.users.removeAt(index); this.myForm.updateValueAndValidity(); // Tried updating validity explicitly } } ``` And in my template, I loop through the `FormArray`: ```html <form [formGroup]='myForm'> <div formArrayName='users'> <div *ngFor='let user of users.controls; let i = index' [formGroupName]='i'> <input formControlName='name' /> <input formControlName='email' /> <button (click)='removeUser(i)'>Remove</button> <div *ngIf='user.get("name")?.invalid && user.get("name")?.touched'>Name is required.</div> <div *ngIf='user.get("email")?.invalid && user.get("email")?.touched'>Invalid email.</div> </div> </div> <button (click)='addUser()'>Add User</button> </form> ``` After removing a control, the validation messages still display for the removed user. I tried calling `updateValueAndValidity()` on the FormArray after the removal, but that didn't resolve the issue. What can I do to ensure that the validation states are accurate after dynamically removing controls? I'd really appreciate any guidance on this. I'm developing on Ubuntu 20.04 with Typescript. Has anyone dealt with something similar?