Angular removeAt always remove last element from FormArray

I have following form. arr is a list of FormBuilder.

get arr() {
return this.form.get('arr') as FormArray;
}


this.form = this.fb.group({
id: this.fb.control(''),
name: this.fb.control('', Validators.required),
arr: this.fb.array([], Validators.minLength(1)),
});



public removeArr(idx: number) {
this.arr.removeAt(0);
}


As you can see this.arr.removeAt(0), I am trying to remove first arr from the list, but it always removes the last element. Even I change it to something else e.g this.arr.removeAt(2), instead of removing the third element it removes the last element.

How can I remove any element given by idx instead of always removing the last element.

Note:

Looks like the problem is related to the trackby function.

<form *ngIf="form" [formGroup]="form">
<mat-form-field appearance="outline">
<mat-label>Name</mat-label>
<input type="text" matInput formControlName="name" required />
</mat-form-field>


<div
class="arr-row"
*ngFor="let control of arrControls; let i = index; trackBy: trackByIndex"
[formGroupName]="i"
>

<mat-form-field appearance="outline">
<mat-label>Name</mat-label>
<input type="text" matInput formControlName="name" required />
</mat-form-field>


<button mat-icon-button type="button" (click)="removeArr(i)">
<mat-icon>delete</mat-icon>
</button>

</div>


</form>

trackByIndex: TrackByFunction<FormControl> = (index, _) => index;


If I change trackby function to

trackByIndex: TrackByFunction<FormControl> = (index, v) => v.value.id;


Then it works but not all of the elements has id, so I can not use id here.

Continue reading...