Angular Forms Part 8 (Forms Array)

 Form Array class:

This is used to create an array of form controls (or) form groups (or) nested form array

The main importance of form array is dynamic controls creation.

This class comes with 2 unique methods of an array
 1.push(item)--it will add an item into form array
 2.removeItem(index)--it will remove an element from formarray

requirement:
     cart model
        |
   Cust name--Form Control
   address --Form Control
     prods --Form Array[collection of Form Groups, Each Form Group will maintain one prod info]

Design a form with the following fields

    Cust name: textbox
     address:
         text area[multiline textbox]
         add product button

  productid      prod name     price
  textbox         textbox          textbox       remove

    ...      ...       ...
 
         save button




Create a component

ng g c mdf3 --flat

 
.ts Changes

import { Component } from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-mdf3',
  templateUrl: './mdf3.component.html',
  styleUrls: ['./mdf3.component.css'],
})
export class Mdf3Component {
  cartmodel: FormGroup;
  custinfo: string | undefined;
  prodsinfo: string | undefined;

  createFormGroup(): FormGroup {
    return new FormGroup({
      pid: new FormControl('', [Validators.required]),
      pname: new FormControl('', [Validators.required]),
      price: new FormControl('', [Validators.required]),
    });
  }
  constructor() {
    //build a model
    this.cartmodel = new FormGroup({
      custname: new FormControl('', [Validators.required]),
      address: new FormControl('', [Validators.required]),
      prods: new FormArray([this.createFormGroup()]),
    });
  }
  addproduct() {
    (<FormArray>this.cartmodel.get('prods')).push(this.createFormGroup());
    //get("prods") will return AbstractControl class,this should be typecasted to FormArray class to access push method
  }
  delete(i: number) {
    //para i will recieve index number
    (<FormArray>this.cartmodel.get('prods')).removeAt(i);
  }
  save() {
    this.custinfo =
      this.cartmodel.value.custname + ':' + this.cartmodel.value.address;
    this.prodsinfo = '';
    for (let p of this.cartmodel.value.prods) {
      this.prodsinfo =
        this.prodsinfo + p.pid + ':' + p.pname + ':' + p.price + '<br>';
    }
  }
}


.html Changes

<form [formGroup]="cartmodel">
    <div style="font-size:x-large;margin:15px">
   custname:<input formControlName="custname"> <br>
   address : <br>
   <textarea rows="5" cols="30" formControlName="address"></textarea>
   <br>
   <input type="button" value="addproduct" (click)="addproduct()">
   <br>
   <table border="1">
       <tr>
           <th>pid</th>
           <th>pname</th>
           <th>price</th>
           <th>option</th>
       </tr>
       <ng-container formArrayName="prods">
        <tr *ngFor="let p of cartmodel.get('prods')?.value;let i=index" [formGroupName]="i">
            <td>
                <input formControlName="pid">
            </td>
            <td>
               <input formControlName="pname">
           </td>
           <td>
               <input formControlName="price">
           </td>
           <td>
            <input type="button" value="remove" (click)="delete(i)">
        </td>
        </tr>
      </ng-container>
   </table>
   <br>
   <input type="button" value="save" (click)="save()">
   <br>
   {{custinfo}}
   <br>
   <span [innerHtml]="prodsinfo"></span>
   </div>
   </form>
   

note:
-----
Initially prods form array will have only one form group, so ngfor will create
 one table row with textboxes
addproduct button click will add one new formgroup into prods formarray,accordingly
 ngfor will create a new table row with textboxes

*remove button click will remove formgroup from prods formarray based on
 index,accordingly table row will be removed


Output