Open In App

Angular forms FormArrayName Directive

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



Similar Reads

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: &lt;form #FormName = "ngForm"&gt; &lt;/form&gt; NgModule: Module used by NgForm is: FormsModule Selectors: [ngForm] Approach: Create the Angular app to
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: &lt;Input [(NgModel)= 'name']&gt; NgModule: Module used by NgModel is: FormsModule Selectors: [ngModel] Approach: Create the Angular app to be usedIn
1 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: &lt;form [FormControlName] ="name"&gt; Exported from: ReactiveFormsModule Selectors: [FormControlName] Approach: Create the Angular app to be
1 min read
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 &lt;input maxLength ="number"&gt; Exported from: ReactiveFormsModuleFormsModule Selectors: [maxlength] [formControlName][maxlength] [formControl][m
1 min read
Angular forms formatCurrency Directive
In this article, we are going to see what is formatCurrency in Angular 10 and how to use it. The formatCurrency is used to format a number as currency using locale rules. Syntax: formatCurrency(value, locale, currency, currencyCode, digitsInfo) Parameters: value: The number to format.locale: A locale code for the locale format.currency: A string co
2 min read
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: &lt;form [FormGroupName] ="details"&gt; Exported from: ReactiveFormsModule Selectors: [FormGroupName] Approach: Create the Angular app to be usedIn app.component.ts make an object
2 min read
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: &lt;div ngModelGroup="name"&gt;&lt;/div&gt; NgModule: Module used by NgModelGroup is: FormsModule Selectors: [ngModelGroup] Approach: Cr
1 min read
Spectre Forms Horizontal forms
Spectre Forms Horizontal forms are horizontal forms if you want to create a horizontal form then you have to use the form-horizontal class in form element. For each fields in the form you can use col-* and col-xs/sm/lg/xl-* class to the child elements for responsive form row layout. Here the * can be replaceable by 1 to 12 any number you want based
2 min read
Styling Django Forms with django-crispy-forms
Django by default doesn't provide any Django form styling method due to which it takes a lot of effort and precious time to beautifully style a form. django-crispy-forms solves this problem for us. It will let you control the rendering behavior of your Django forms in a very elegant and DRY way. Modules required:django : django installdjango-crispy
1 min read
Reactive Forms vs Template Driven Forms
Angular provides two main approaches for handling forms: Reactive Forms and Template-Driven Forms. In this article, we'll learn more about Reactive Forms and Template-Driven Forms in detail. Table of Content Reactive FormsTemplate Driven FormsDifference between Reactive Forms and Template Driven FormsConclusionReactive FormsReactive Forms is a way
6 min read