feat(forms): add support for pushing an array of controls to formarray (#57102)

Bjeaurn · crisbeto · commit c353497a0177 · 2025-08-06T11:20:18.000+02:00
Enables users to add an array of FormControls to a FormArray using its existing .push() method, instead of pushing each new FormControl one by one triggering events along the way. PR Close #57102
diff --git a/goldens/public-api/forms/index.api.md b/goldens/public-api/forms/index.api.md
@@ -259,7 +259,7 @@ export class FormArray<TControl extends AbstractControl<any> = any> extends Abst
         onlySelf?: boolean;
         emitEvent?: boolean;
     }): void;
-    push(control: TControl, options?: {
+    push(control: TControl | Array<TControl>, options?: {
         emitEvent?: boolean;
     }): void;
     removeAt(index: number, options?: {
diff --git a/packages/forms/src/model/form_array.ts b/packages/forms/src/model/form_array.ts
@@ -174,9 +174,16 @@ export class FormArray<TControl extends AbstractControl<any> = any> extends Abst
    * `valueChanges` observables emit events with the latest status and value when the control is
    * inserted. When false, no events are emitted.
    */
-  push(control: TControl, options: {emitEvent?: boolean} = {}): void {
-    this.controls.push(control);
-    this._registerControl(control);
+  push(control: TControl | Array<TControl>, options: {emitEvent?: boolean} = {}): void {
+    if (Array.isArray(control)) {
+      control.forEach((ctrl) => {
+        this.controls.push(ctrl);
+        this._registerControl(ctrl);
+      });
+    } else {
+      this.controls.push(control);
+      this._registerControl(control);
+    }
     this.updateValueAndValidity({emitEvent: options.emitEvent});
     this._onCollectionChange();
   }
diff --git a/packages/forms/test/form_array_spec.ts b/packages/forms/test/form_array_spec.ts
@@ -41,6 +41,12 @@ import {asyncValidator} from './util';
         expect(a.controls).toEqual([c1]);
       });
 
+      it('should support pushing an array', () => {
+        a.push([c1, c2]);
+        expect(a.length).toEqual(2);
+        expect(a.controls).toEqual([c1, c2]);
+      });
+
       it('should support removing', () => {
         a.push(c1);
         a.push(c2);
@@ -971,6 +977,18 @@ import {asyncValidator} from './util';
 
         a.push(c2);
       });
+
+      it('should fire an event once when calling `FormArray.push` with an array of controls', (done) => {
+        a = new FormArray<any>([]);
+        a.valueChanges.subscribe({
+          next: (value: any) => {
+            expect(value).toEqual(['old1', 'old2']);
+            done();
+          },
+        });
+
+        a.push([c1, c2]);
+      });
     });
 
     describe('get', () => {
