👀 Views: 120 💬 Answers: 1 📅 Created: 2025-06-10

angular reactive-forms formarray typescript

I'm sure I'm missing something obvious here, but I've been researching this but I'm trying to configure Quick question that's been bugging me - I'm working on an Angular application (version 14) where I have a dynamic form composed of multiple FormArray elements. I've implemented custom validators to ensure that at least one checkbox in each FormGroup within the FormArray is checked. However, I've noticed that the `valueChanges` observable is not being triggered when I check or uncheck the checkboxes. It seems like the issue arises when I use custom validators along with `FormArray`. Here's a simplified version of my implementation: ```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 { myForm: FormGroup; constructor(private fb: FormBuilder) { this.myForm = this.fb.group({ items: this.fb.array([]) }); } ngOnInit() { this.addItem(); // Adding an initial item this.myForm.get('items')?.valueChanges.subscribe(value => { console.log('Form values changed:', value); }); } addItem() { const itemsControl = this.myForm.get('items') as FormArray; const itemGroup = this.fb.group({ checkbox: [false, this.customValidator()], }); itemsControl.push(itemGroup); } customValidator() { return (control) => { const hasChecked = control.value ? control.value.checkbox : false; return hasChecked ? null : { required: true }; }; } } ``` And my template looks like this: ```html <form [formGroup]='myForm'> <div formArrayName='items'> <div *ngFor='let item of myForm.get("items").controls; let i = index' [formGroupName]='i'> <label> <input type='checkbox' formControlName='checkbox'> Item {{ i + 1 }} </label> </div> </div> </form> ``` When I check or uncheck the checkbox, the `valueChanges` subscription does not log anything to the console. I suspect that the `customValidator` might be causing the problem, but I haven't found a solution yet. I've tried removing the validator and confirmed that the `valueChanges` fires correctly. How can I ensure that `valueChanges` is triggered even when using a custom validator? Is there something I'm missing in how Angular handles `FormArray` updates when custom validators are involved? This is part of a larger application I'm building. Any help would be greatly appreciated! I'm working in a Linux environment. My development environment is Windows 11. Could this be a known issue?