What does the formArrayName directive do?

AngularJunior~1 min read

formArrayName is a directive that binds part of the template to a FormArray object inside a FormGroup.

It is needed when a form contains a dynamic list of fields of the same type, such as phone numbers, addresses, answer options, and so on.

Example:

typescript

form = new FormGroup({
  phones: new FormArray([
    new FormControl(''),
    new FormControl('')
  ])
});

html

<form [formGroup]="form">
  <div formArrayName="phones">
    <div *ngFor="let phone of form.get('phones')['controls']; let i = index">
      <input [formControlName]="i">
    </div>
  </div>
</form>

formArrayName tells Angular that inside this block the elements belong to a FormArray, so it correctly binds the fields by index and tracks their state.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.