Angular forms FormArrayName Directive

Angular forms FormArrayName Directive

Last Updated : 04 Jun, 2021

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 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:

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

Angular forms FormArrayName Directive

taran910

Improve

Article Tags :

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

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

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

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

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

AngularJS ng-form Directive

The ng-form Directive in AngularJS is used to create a nested form i.e. one form inside the other form. It specifies an inherit control from the HTML form. It creates a control group inside a form directive which can be used to determine the validity of a sub-group of controls. Syntax: <ng-form [

Angular forms NgModelGroup Directive

In this article, we are going to see what is NgModelGroup in Angular 10 and how to use it. The NgModelGroup is used to create a top-level form group Instance, and it binds the form to the given form value. Syntax: <div ngModelGroup="name"></div> NgModule: Module used by NgModelGroup is:

Angular10 NgFor Directive

In this article, we are going to see what is NgFor in Angular 10 and how to use it. NgFor is used as a structural directive that renders each element for the given collection each element can be displayed on the page. Syntax: <li *ngFor='condition'></li> NgModule: Module used by NgForOf

Angular forms MaxLengthValidator Directive

In this article, we are going to see what is MaxLengthValidator in Angular 10 and how to use it. The MaxLengthValidator is used to synchronize a standalone FormControl instance to a form control element <input maxLength ="number"> Exported from: ReactiveFormsModuleFormsModule Selectors: [maxle

Angular forms FormGroupDirective

In this article, we are going to see what is FormGroupDirective in Angular 10 and how to use it. FormGroupDirective is used to Bind an existing FormGroup to a DOM element. Syntax: <form [FormGroup] ="name"> Exported from: ReactiveFormsModule Â Selectors: [FormGroup] Approach:Â Create the Angul