How to add remove form field dynamically in angular using formArray and reactive form in angular 10

How to add remove form field dynamically in angular using formArray and reactive form in angular 10

Here is a complete guide to adding or removing field dynamically in angular 10

Please follow the following step to complete your required functionality in the angular 10

Step 1: Please watch the video for a clear understanding where you will know the implementation of logic in angular

In the Hindi language

 

In the English language

How to add remove form field dynamically in angular using formArray and reactive form in angular 9


Dynamically Nested Angular Reactive Forms | Dynamically Add Or deleted Form Field in Angular 10

 
Advanced Angular 10 Tutorial in Hindi https://www.youtube.com/playlist?list...
Advance Angular 10 Tutorials in English
https://www.youtube.com/playlist?list...
 
In Hindi How to add remove input field dynamically in Angular 9 using reactive form in Hindi with Github Code
https://youtu.be/ZEjYunNg0kk
how to dynamically add and remove form fields in angular 8 Github Full detail Hindi
https://youtu.be/Aj2tCmWko3A
 
Step 2: Please ask your doubt through WhatsApp message about Angular this is a direct way to get an idea if you are unable to understand through video tutorials

https://chat.whatsapp.com/BaipKpuTdy4JxlgNDLoihc

 
 
Step 3: Check the GitHub link for more information
 
Step 4: Check the file here but the file would not be formatted correctly
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormArray, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-simpleadd',
  templateUrl: './simpleadd.component.html',
  styleUrls: ['./simpleadd.component.css']
})
export class SimpleaddComponent implements OnInit {

  constructor(private _fb: FormBuilder) { }
  public addmore: FormGroup;

  ngOnInit() {
  	this.addmore = this._fb.group({
  	  title:[''],
  	  type:[''],
  	  descripition:[''],
      itemRows: this._fb.array([this.initItemRows()])
    });
  }
  get formArr() {
    return this.addmore.get('itemRows') as FormArray;
  }

  initItemRows() {
    return this._fb.group({
    timeRange:[''],
    learn:[''],
    descripition:[''],
    suggestion:[''],
    });
  }
  addNewRow() {
    this.formArr.push(this.initItemRows());
  }

  deleteRow(index: number) {
    this.formArr.removeAt(index);
  }

}

  <div class="container-fluid">
  <form [formGroup]="addmore">
  <div class="card">
  <div class="card-header text-center">Add Daily Task Report</div>
  <div class="card-body">
   
   
  <div class="row">
  <div class="col-sm-4">
  <mat-form-field appearance="outline">
  <mat-label>Title</mat-label>
  <input matInput formControlName="title">
   
  </mat-form-field>
  </div>
  <div class="col-sm-3">
  <mat-form-field appearance="outline">
  <mat-label>type</mat-label>
  <mat-select formControlName="type">
  <mat-option value="">
  None
  </mat-option>
  <mat-option value="1">
  Plan
  </mat-option>
  <mat-option value="1">
  Rutine
  </mat-option>
  <mat-option value="1">
  R&D
  </mat-option>
   
  </mat-select>
  </mat-form-field>
  </div>
  <div class="col-sm-4">
  <mat-form-field appearance="outline">
  <mat-label>descripition</mat-label>
  <textarea matInput formControlName="descripition"></textarea>
  </mat-form-field>
  </div>
   
  </div>
   
  <div class="row">
  <div class="col-sm-12 table-responsive" formArrayName="itemRows">
  <table class="table">
  <thead>
  <tr>
  <th style="white-space: nowrap;padding-right: 4em;float:center"><span class="required-field"></span>Time Range </th>
  <th style="white-space: nowrap;padding-right: 4em;float:center">Learn </th>
  <th style="white-space: nowrap;padding-right: 4em;float:center">Descripition </th>
  <th style="white-space: nowrap;padding-right: 4em;float:center">Suggestion</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let itemrow of addmore.controls.itemRows['controls']; let i=index" [formGroupName]="i">
   
  <td style="white-space: nowrap;"> <input id="timeRange{{i}}" formControlName="timeRange" class="form-control"></td>
   
   
  <td> <textarea id="learn{{i}}" formControlName="learn" class="form-control reset"></textarea></td>
  <td> <textarea formControlName="descripition" class="form-control reset"></textarea></td>
  <td> <textarea formControlName="suggestion" class="form-control reset"></textarea></td>
  <td> <button *ngIf="addmore.controls.itemRows.controls.length > 1" (click)="deleteRow(i)" class="btn btn-danger"><i class="fa fa-minus-circle" aria-hidden="true"></i></button></td>
  </tr>
  </tbody>
  <tfoot>
  <tr><td> <button type="button" (click)="addNewRow()" class="btn btn-primary"><i class="fa fa-plus-circle" aria-hidden="true"></i></button></td></tr>
  </tfoot>
  </table>
  </div>
   
  </div>
   
   
  </div>
  <div class="card-footer">
  <button mat-raised-button color="primary">Primary</button>
  </div>
  </div>
  </form>
   
  </div>

Hello guys Please subscribe my youtube  channel and support me as well so that we can work hard to share my knowledge

We want to make quality video and blog tutorial based on a practical approach which we are using in the organization to achieve this functionality
Please please it is my humble request to you guys
If you want to donate as well then please connect with me on WhatsApp for more information
https://chat.whatsapp.com/BaipKpuTdy4JxlgNDLoihc

https://www.youtube.com/c/worldgyan