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.