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

 

 

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

 

 

Github link: https://github.com/AshutoshChoubey/dailyTaskReport

Two important files:

https://github.com/AshutoshChoubey/dailyTaskReport/blob/master/src/app/modules/form/simpleadd/simpleadd.component.ts

https://github.com/AshutoshChoubey/dailyTaskReport/blob/master/src/app/modules/form/simpleadd/simpleadd.component.html

 
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