Hello Devs,

In this tutorial, we are going to learn angular 10 formarray reactive forms.

Given below is the very simple and step by step example of how to use formarray in angular 6, anuglar 7, angular 8, angular 10 application.

FormArray Constructor:

constructor(controls: AbstractControl[], validatorOrOpts?: ValidatorFn |

 AbstractControlOptions | ValidatorFn[], asyncValidator?: AsyncValidatorFn | 

 AsyncValidatorFn[])

Follow this step by step guide given below:




Import FormsModule:

src/app/app.module.ts

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

   

import { AppComponent } from './app.component';

   

@NgModule({

  imports:      [ BrowserModule, FormsModule, ReactiveFormsModule ],

  declarations: [ AppComponent ],

  bootstrap:    [ AppComponent ]

})

export class AppModule { }



update Ts File

src/app/app.component.ts

import { Component } from '@angular/core';

import { FormGroup, FormControl, FormArray, FormBuilder } from '@angular/forms'

  

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  name = 'Angular';

  

  productForm: FormGroup;

   

  constructor(private fb:FormBuilder) {

   

    this.productForm = this.fb.group({

      name: '',

      quantities: this.fb.array([]) ,

    });

  }

  

  quantities() : FormArray {

    return this.productForm.get("quantities") as FormArray

  }

   

  newQuantity(): FormGroup {

    return this.fb.group({

      qty: '',

      price: '',

    })

  }

   

  addQuantity() {

    this.quantities().push(this.newQuantity());

  }

   

  removeQuantity(i:number) {

    this.quantities().removeAt(i);

  }

   

  onSubmit() {

    console.log(this.productForm.value);

  }

}



Template Code:

src/app/app.component.html

<div class="container">

  

  <h1>Angular FormArray Example - Rathorji.in</h1>

  

  <form [formGroup]="productForm" (ngSubmit)="onSubmit()">

    

    <p>

      <label for="name">Product Name:</label>

      <input type="text" id="name" name="name" formControlName="name" class="form-control">

    </p>

  

    <table class="table table-bordered" formArrayName="quantities">

      <tr>

        <th colspan="2">Add Multiple Quantity:</th>

        <th width="150px"><button type="button" (click)="addQuantity()" class="btn btn-primary">Add More</button></th>

      </tr>

      <tr *ngFor="let quantity of quantities().controls; let i=index" [formGroupName]="i">

        <td>

            Quantity :

            <input type="text" formControlName="qty" class="form-control">

        </td>

        <td>

            Price:

            <input type="text" formControlName="price" class="form-control">

        </td>

        <td>

            <button (click)="removeQuantity(i)" class="btn btn-danger">Remove</button>

        </td>

      </tr>

    </table>

   

    <button type="submit" class="btn btn-success">Submit</button>

    

  </form>

    

  <br/>

  {{this.productForm.value | json}}

</div>


Run this command:

ng serve


I hope this example helps you.