Remove Forms Controls Dynamically - Part Two

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

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.

Step 1 

Let's see the "Remove" ClickEvent,

<div class="col-sm-6" *ngIf="i>0">
          <button type="button" class="btn btn-danger btn-sm pull-right"
                  (click)="removeClick(i)">
                 Remove
          </button>
        </div>

Step 2

 

Definition of remove click event,

removeClick(skillGroupIndex: number): void {
    (<FormArray>this.personalForm.get('other')).removeAt(skillGroupIndex);
  }

Get Complete GitHub Code