(Nested) Dynamic Controls are not being tracked when added after form initialization.

[Fmlog]

Which @angular/* package(s) are the source of the bug?

forms

Is this a regression?

Yes

Description

When I initialize a form with an empty form array as one of the controls and add more controls to the array. The dynamic controls are not tracked and do not emit valueChange to form when they are changed. There is a complete demo below. I am using Angular version 17.3.9 at the time of writing this issue. Also validators added to the formArray does not work for the same reason as stated below

import { Component, OnInit, inject } from '@angular/core';
import { AbstractControl, FormArray, FormBuilder, FormControl, ValidationErrors, ValidatorFn } from '@angular/forms';

@Component({
  selector: 'app-root',
  template:  `
  <div class="form-group" [formGroup]="form">
    <fieldset class="fieldset" formArrayName="dynamicCheckboxes">
        <label class="hint">Please select all applicable</label>

        <!--Also the validator does not work for the same reason as stated below -->
        @if (form.controls.dynamicCheckboxes.hasError('atLeastOne') && (form.controls.dynamicCheckboxes.dirty ||
          form.controls.dynamicCheckboxes.touched)) {
          <span class="error-message">
              Please select at least one 
          </span>
        }
        <div class="checkboxes inline-checkboxes">
            @for (opt of apiOptions; track opt; let i = $index) {
              <div class="checkboxes__item">
                  <input class="checkboxes__input" type="checkbox" name={{i}}} id="id{{i}}"
                      [formControl]="form.controls.dynamicCheckboxes.controls[i]">
                  <label class="label checkboxes__label">{{apiOptions[i].text}}</label>
              </div>
            }
        </div>
    </fieldset>
</div>
`,
})
export class AppComponent implements OnInit {
  apiOptions = [
    { id: 0, text: 'One' },
    { id: 1, text: 'Two' },
    { id: 2, text: 'Three' },
  ];

  fb = inject(FormBuilder)
  form = this.fb.nonNullable.group({
    dynamicCheckboxes: this.fb.array<FormControl<boolean | null>>([], atLeastOne()),
  });

  ngOnInit() {
    this.form.valueChanges.subscribe((formValue) => {
      console.log(formValue); // Nothing happens, dynamic controls do not trigger value change on form
    });
  }
}

export function atLeastOne(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const atLeastOneChecked = (control as FormArray).controls.some(
      (x) => x.value === true
    );

    return atLeastOneChecked ? null : { atLeastOne: true };
  };
}

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-me9bcr?file=src%2Fmain.ts

Please provide the exception or error you saw

No Exception or error.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.3.7
Node: v20.13.1
Package Manager: 10.5.2
OS: windows 10

Angular: 17.3.9
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/build-angular   17.3.7
rxjs                            7.8.0
typescript                      5.4.5

Anything else?

Please offer an alternative if it is a feature. I need the form to be aware of the state of the dynamic components, thanks.

[JeanMeche]

Hi, could you provide a working stackblitz reproduction ?
The code you provinded has multiple errors.

[Fmlog]

I have spent the last 30mins trying to reproduce the error on stackblitz, everything seems to be working as expected. There must be something wrong with my component that is causing it to break.

Thank you for your quick response.