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
Github link: https://github.com/AshutoshChoubey/dailyTaskReport
Two important files:
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