Skip to content
Related Articles

Related Articles

Angular forms FormArrayName Directive

Improve Article
Save Article
  • Last Updated : 04 Jun, 2021
Improve Article
Save Article

In this article, we are going to see what is Style in Angular 10 and how to use it.

The FormArrayName is used to sync a nested FormArray to a DOM element.


<div formArrayName="arrayName">

NgModule: Module used by FormArrayName is:

  • ReactiveFormsModule



  • [FormArrayName]


  • Create the Angular app to be used
  • In app.component.ts make an array that takes the value from the form
  • In app.component.html make a form and send the value to the array to the submission.
  • Serve the angular app using ng serve to see the output.

Example 1:


import { Component, Inject } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms'
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
export class AppComponent {
    form = new FormGroup({
        courses: new FormArray([]),
    get courses(): FormArray {
        return this.form.get('courses') as FormArray;
    addCourse() { FormControl());
    onSubmit() {


<form [formGroup]="form" (ngSubmit)="onSubmit()">
    <div formArrayName="courses">
        <div *ngFor="let course of courses.controls; index as i">
            <input [formControlName]="i" placeholder="Course">
<button (click)="addCourse()">Add Course</button>



My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!