From Get docs
< @angular/formsAngular/docs/10/api/forms/formarrayname



Syncs a nested FormArray to a DOM element.

See more...

See also



  • [formArrayName]


Property Description
number | null Tracks the name of the FormArray bound to the directive. The name corresponds to a key in the parent FormGroup or FormArray. Accepts a name as a string or a number. The name in the form of a string is useful for individual forms, while the numerical form allows for form arrays to be bound to indices when iterating over arrays in a FormArray.
control: FormArray

Read-Only The FormArray bound to this directive.


Read-Only The top-level directive for this group if present, otherwise null.

path: string[]

Read-Only Returns an array that represents the path from the top-level form to this control. Each index is the string name of the control on that level.


Read-Only Synchronous validator function composed of all the synchronous validators registered with this directive.


Read-Only Async validator function composed of all the async validators registered with this directive.

Inherited from ControlContainer

  • name: string | number | null
  • formDirective: Form | null
  • path: string[] | null

Inherited from AbstractControlDirective

  • abstract control: AbstractControl | null
  • value: any
  • valid: boolean | null
  • invalid: boolean | null
  • pending: boolean | null
  • disabled: boolean | null
  • enabled: boolean | null
  • errors: ValidationErrors | null
  • pristine: boolean | null
  • dirty: boolean | null
  • touched: boolean | null
  • status: string | null
  • untouched: boolean | null
  • statusChanges: Observable<any> | null
  • valueChanges: Observable<any> | null
  • path: string[] | null


This directive is designed to be used with a parent FormGroupDirective (selector: [formGroup]).

It accepts the string name of the nested FormArray you want to link, and will look for a FormArray registered with that name in the parent FormGroup instance you passed into FormGroupDirective.


import {Component} from '@angular/core';
import {FormArray, FormControl, FormGroup} from '@angular/forms';

  selector: 'example-app',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <div formArrayName="cities">
        <div *ngFor="let city of cities.controls; index as i">
          <input [formControlName]="i" placeholder="City">

    <button (click)="addCity()">Add City</button>
    <button (click)="setPreset()">Set preset</button>
export class NestedFormArray {
  form = new FormGroup({
    cities: new FormArray([
      new FormControl('SF'),
      new FormControl('NY'),

  get cities(): FormArray {
    return this.form.get('cities') as FormArray;

  addCity() {
    this.cities.push(new FormControl());

  onSubmit() {
    console.log(this.cities.value);  // ['SF', 'NY']
    console.log(this.form.value);    // { cities: ['SF', 'NY'] }

  setPreset() {
    this.cities.patchValue(['LA', 'MTV']);

Inherited from AbstractControlDirective

  • reset(value: any = undefined): void
  • hasError(errorCode: string, path?: string | (string | number)[]): boolean
  • getError(errorCode: string, path?: string | (string | number)[]): any

© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.