Skip to content
Permalink
Browse files

feat(forms): clear (remove all) components from a FormArray (#28918)

This method is a more convenient and efficient way of removing all
components from a FormArray. Before it, we needed to loop the FormArray
removing each component until empty.

Resolves #18531

PR Close #28918
  • Loading branch information...
renanmontebelo authored and kara committed Feb 22, 2019
1 parent 014841d commit a68b1a1894b37a7064bf5f9fdd62b8338bc53ba0
Showing with 52 additions and 0 deletions.
  1. +37 −0 packages/forms/src/model.ts
  2. +14 −0 packages/forms/test/form_array_spec.ts
  3. +1 −0 tools/public_api_guard/forms/forms.d.ts
@@ -1895,6 +1895,43 @@ export class FormArray extends AbstractControl {
});
}

/**
* Remove all controls in the `FormArray`.
*
* @usageNotes
* ### Remove all elements from a FormArray
*
* ```ts
* const arr = new FormArray([
* new FormControl(),
* new FormControl()
* ]);
* console.log(arr.length); // 2
*
* arr.clear();
* console.log(arr.length); // 0
* ```
*
* It's a simpler and more efficient alternative to removing all elements one by one:
*
* ```ts
* const arr = new FormArray([
* new FormControl(),
* new FormControl()
* ]);
*
* while (arr.length) {
* arr.removeAt(0);
* }
* ```
*/
clear(): void {
if (this.controls.length < 1) return;
this._forEachChild((control: AbstractControl) => control._registerOnCollectionChange(() => {}));
this.controls.splice(0);
this.updateValueAndValidity();
}

/** @internal */
_syncPendingControls(): boolean {
let subtreeUpdated = this.controls.reduce((updated: boolean, child: AbstractControl) => {
@@ -59,6 +59,20 @@ import {of } from 'rxjs';
expect(a.controls).toEqual([c1, c3]);
});

it('should support clearing', () => {
a.push(c1);
a.push(c2);
a.push(c3);

a.clear();

expect(a.controls).toEqual([]);

a.clear();

expect(a.controls).toEqual([]);
});

it('should support inserting', () => {
a.push(c1);
a.push(c3);
@@ -170,6 +170,7 @@ export declare class FormArray extends AbstractControl {
readonly length: number;
constructor(controls: AbstractControl[], validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null);
at(index: number): AbstractControl;
clear(): void;
getRawValue(): any[];
insert(index: number, control: AbstractControl): void;
patchValue(value: any[], options?: {

0 comments on commit a68b1a1

Please sign in to comment.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.