Skip to content
Related Articles
Open in App
Not now

Related Articles

Angular forms FormArrayName Directive

Improve Article
Save Article
Like Article
  • Last Updated : 04 Jun, 2021
Improve Article
Save Article
Like 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
Like Article
Save Article
Related Articles

Start Your Coding Journey Now!