FormArray

Stable

Class

What it does

Tracks the value and validity state of an array of FormControl, FormGroup or FormArray instances.

A FormArray aggregates the values of each child FormControl into an array. It calculates its status by reducing the statuses 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.

How to use

When instantiating a FormArray, pass in an array of child controls as the first argument.

Example

const arr = new FormArray([ new FormControl('Nancy', Validators.minLength(2)), new FormControl('Drew'), ]); console.log(arr.value); // ['Nancy', 'Drew'] console.log(arr.status); // 'VALID'

You can also include array-level validators as the second arg, or array-level async validators as the third arg. These come in handy when you want to perform validation that considers the value of more than one child control.

Adding or removing controls

To change the controls in the array, use the push, insert, or removeAt methods in FormArray itself. These methods ensure the controls are properly tracked in the form's hierarchy. Do not modify the array of AbstractControls used to instantiate the FormArray directly, as that will result in strange and unexpected behavior such as broken change detection.

  • npm package: @angular/forms

Class Overview

class FormArray extends AbstractControl {
constructor(controls: AbstractControl[], validator?: ValidatorFn, asyncValidator?: AsyncValidatorFn)

controls : AbstractControl[]
at(index: number) : AbstractControl
push(control: AbstractControl) : void
insert(index: number, control: AbstractControl) : void
removeAt(index: number) : void
setControl(index: number, control: AbstractControl) : void
length : number
setValue(value: any[], {onlySelf, emitEvent}?: {onlySelf?: boolean, emitEvent?: boolean}) : void
patchValue(value: any[], {onlySelf, emitEvent}?: {onlySelf?: boolean, emitEvent?: boolean}) : void
reset(value?: any, {onlySelf, emitEvent}?: {onlySelf?: boolean, emitEvent?: boolean}) : void
getRawValue() : any[]

}

Class Description

Constructor

constructor(controls: AbstractControl[], validator?: ValidatorFn, asyncValidator?: AsyncValidatorFn)

Class Details

exported from @angular/forms/index, defined in @angular/forms/src/model.ts