Post
Ask Question

Remove Forms Controls Dynamically - Part Two

This is a continuation of my previous blog, Creating Form Controls Dynamically In Angular 7. In that blog we have added additional controls as per user preference. In this part, we will see how to remove the controls which are added dynamically.

Let’s start. We'll add a remove button to each additional section for additional fields.

Remove Forms Controls Dynamically

Step 1 

Let's see the "Remove" ClickEvent,
  1. <div class="col-sm-6" *ngIf="i>0">  
  2.           <button type="button" class="btn btn-danger btn-sm pull-right"  
  3.                   (click)="removeClick(i)">  
  4.                  Remove   
  5.           </button>  
  6.         </div>  
Step 2
 
Definition of remove click event,
  1. removeClick(skillGroupIndex: number): void {  
  2.     (<FormArray>this.personalForm.get('other')).removeAt(skillGroupIndex);  
  3.   }  

Get Complete GitHub Code
Next Recommended Reading Creating Form Controls Dynamically In Angular 7