Angular 10 References/ Forms
References

FormArray

A FormArray aggregates the values of each child FormControl into an array. It calculates its status by reducing the status values of its children. For example, if one of the controls in a FormArray is invalid, the entire array becomes invalid.

FormArray is one of the three fundamental building blocks used to define forms in Angular, along with FormControl and FormGroup.

Interface, extends AbstractControl

at#

at(index: number): AbstractControl
Get the `AbstractControl` at the given `index` in the array.

push#

push(control: AbstractControl): void
Insert a new `AbstractControl` at the end of the array.

insert#

insert(index: number, control: AbstractControl): void
Insert a new `AbstractControl` at the given `index` in the array.

removeAt#

removeAt(index: number): void
Remove the control at the given `index` in the array.

setControl#

setControl(index: number, control: AbstractControl): void
Replace an existing control.

length#

get length(): number
Length of the control array.

setValue#

setValue(value: any[], options: {onlySelf?: boolean, emitEvent?: boolean} = {}): void
Sets the value of the `FormArray`. It accepts an array that matches the structure of the control. This method performs strict checks, and throws an error if you try to set the value of a control that doesn't exist or if you exclude the value of a control. ### Set the values for the controls in the form array ``` const arr = new FormArray([ new FormControl(), new FormControl() ]); console.log(arr.value); // [null, null] arr.setValue(['Nancy', 'Drew']); console.log(arr.value); // ['Nancy', 'Drew'] ```

patchValue#

patchValue(value: any[], options: {onlySelf?: boolean, emitEvent?: boolean} = {}): void
Patches the value of the `FormArray`. It accepts an array that matches the structure of the control, and does its best to match the values to the correct controls in the group. It accepts both super-sets and sub-sets of the array without throwing an error. ### Patch the values for controls in a form array ``` const arr = new FormArray([ new FormControl(), new FormControl() ]); console.log(arr.value); // [null, null] arr.patchValue(['Nancy']); console.log(arr.value); // ['Nancy', null] ```

reset#

reset(value: any = [], options: {onlySelf?: boolean, emitEvent?: boolean} = {}): void
Resets the `FormArray` and all descendants are marked `pristine` and `untouched`, and the value of all descendants to null or null maps. You reset to a specific form state by passing in an array of states that matches the structure of the control. The state is a standalone value or a form state object with both a value and a disabled status. ### Reset the values in a form array ```ts const arr = new FormArray([ new FormControl(), new FormControl() ]); arr.reset(['name', 'last name']); console.log(this.arr.value); // ['name', 'last name'] ``` ### Reset the values in a form array and the disabled status for the first control ``` this.arr.reset([ {value: 'name', disabled: true}, 'last' ]); console.log(this.arr.value); // ['name', 'last name'] console.log(this.arr.get(0).status); // 'DISABLED' ```

getRawValue#

getRawValue(): any[]
The aggregate value of the array, including any disabled controls. Reports all values regardless of disabled status. For enabled controls only, the `value` property is the best way to get the value of the array.

clear#

clear(): void
Remove all controls in the `FormArray`. ### 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); } ```