Angular forms FormArrayName Directive Last Updated : 04 Jun, 2021 Comments Improve Suggest changes Like Article Like Report 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. Syntax: <div formArrayName="arrayName"> NgModule: Module used by FormArrayName is: ReactiveFormsModule Selectors: [FormArrayName] Approach: Create the Angular app to be usedIn app.component.ts make an array that takes the value from the formIn 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: app.component.ts import { Component, Inject } from '@angular/core'; import { FormGroup, FormControl, FormArray } from '@angular/forms' @Component({ 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() { this.courses.push(new FormControl()); } onSubmit() { console.log(this.courses.value); } } app.component.html <br> <form [formGroup]="form" (ngSubmit)="onSubmit()"> <div formArrayName="courses"> <div *ngFor="let course of courses.controls; index as i"> <input [formControlName]="i" placeholder="Course"> </div> </div> <br> <button>Submit</button> <br><br> </form> <button (click)="addCourse()">Add Course</button> Output: Reference: https://angular.io/api/forms/FormArrayName Comment More infoAdvertise with us Next Article Angular forms FormArrayName Directive T taran910 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Directives Angular10 Similar Reads Angular forms FormGroupName Directive In this article, we are going to see what is FormGroupName in Angular 10 and how to use it. The FormGroupName is used to sync a nested FormGroup to a DOM element. Syntax: <form [FormGroupName] ="details"> Exported from: ReactiveFormsModule Selectors: [FormGroupName]  Approach: Create the Ang 2 min read Angular forms FormControlName Directive In this article, we are going to see what is FormControlName in Angular 10 and how to use it. FormControlName is used to sync a FormControl in an existing FormGroup to a form control element by name. Syntax: <form [FormControlName] ="name"> Exported from: ReactiveFormsModule  Selectors: [Form 1 min read Angular forms NgForm Directive In this article, we are going to see what is NgForm in Angular 10 and how to use it. NgForm is used to create a top-level form group Instance, and it binds the form to the given form value. Syntax: <form #FormName = "ngForm"> </form> NgModule: Module used by NgForm is: FormsModule Select 1 min read Angular forms NgModel Directive In this article, we are going to see what is NgModel in Angular 10 and how to use it. NgModel is used to create a top-level form group Instance, and it binds the form to the given form value. Syntax: <Input [(NgModel)= 'name']> NgModule: Module used by NgModel is: FormsModule Selectors: [ngMod 1 min read Angular FormsModule Directive In this article, we are going to see what is FormsModule in Angular 10 and how to use it. The FormsModule is used to make all the necessary imports for form implementation. Syntax: import { FormsModule } from '@angular/forms'; Approach: Create an Angular app to be used.In app.component.ts import fo 1 min read Like