Angular formgroup, removeat(0) removing 2nd not first control in formgroup

Question

I have a formarray with x number of controls and a corresponding button that removes them, however while all the other buttons work, the button for the first control removes the 2nd one not the first.

here is my template code and you can find the button that removes controls if you ctrl-f color

<form [formGroup]="myForm" novalidate (ngSubmit)="submitModal(myForm)">
    <div class="form-group">
        <label>Routine Name</label>
        <input type="text" formControlName="routineName" value="{{routine.routineName}}">

        <small *ngIf="!myForm.controls.routineName.valid" class="text-danger">
            Name is required (minimum 6 characters).
        </small>
    </div>

    <ion-card formArrayName="subroutines">
        <ion-card-content *ngFor="let rout of myForm.controls.subroutines.controls; let i=index">
            <ion-row [formGroupName]="i">
                <ion-col>
                    <ion-label>Set {{i+1}}</ion-label>
                </ion-col>
                <ion-col>
                    <ion-input type="text" formControlName="setExercise" placeholder="Exercise" value="{{routine.sets[i].setExercise}}"></ion-input>
                    <small [hidden]="myForm.controls.subroutines.controls[i].controls.setExercise.valid">
                        Set Exercise is required
                    </small>
                </ion-col>
                <ion-col>
                    <ion-input type="number" formControlName="repAmount" min="0" value="{{routine.sets[i].repAmount}}"></ion-input>
                </ion-col>
                <ion-col>
                    <ion-input type="number" formControlName="setTime" min="0" value="{{routine.sets[i].setTime}}"></ion-input>
                </ion-col>  
                <ion-col>
                    <button ion-button color="danger" *ngIf="myForm.controls.subroutines.controls.length > 1" (click)="removeSubRoutine(i)"> <ion-icon name="trash"></ion-icon> </button>
                </ion-col>          
            </ion-row>
        </ion-card-content>
    </ion-card>

    <div class="margin-20" *ngIf="myForm.controls.subroutines.controls.length < 10">
      <a (click)="addSubRoutine(true)" style="cursor: default">
        Add another set +
      </a>
    </div>
    <button ion-button type="submit" [disabled]="!myForm.valid">Submit</button>
</form>

and here is my typescript, which creates the form in the constructor and the last function is the one that removes control at i

@IonicPage()
@Component({
  selector: 'page-routine',
  templateUrl: 'routine.html',
})
export class RoutinePage {
  public myForm: FormGroup;
  edit: boolean;
  routine: RoutineModel;

  constructor(public viewCtrl: ViewController, public navParams: NavParams, private _fb: FormBuilder) {
    let rout = new SubRoutine("",0,0);
    this.routine = new RoutineModel("", [rout]);

    this.myForm = this._fb.group({
      routineName: ['', [Validators.required, Validators.minLength(6)]],
      subroutines: this._fb.array([
        this.initSubRoutine(),
        ]),
      rid: ['']
    });

    if(navParams.get('routine') != null)
    {
      this.edit = navParams.get('edit');
      this.routine = navParams.get('routine');

      this.myForm.patchValue({
        routineName: this.routine.routineName,
        rid: this.routine.rid
      })

      for(var i = 0; i < this.routine.sets.length-1; i++)
      {
        this.addSubRoutine(false);
      }
    }
  }

  initSubRoutine(){
    return this._fb.group({
      setExercise:['', Validators.required],
      repAmount:[''],
      setTime:['']
    });
  }
  addSubRoutine(addSub){
    if (addSub == true)
    {
      let rout = new SubRoutine("default",0,0);
      this.routine.sets.push(rout);
    }
    const control = <FormArray>this.myForm.controls['subroutines'];
    control.push(this.initSubRoutine());
  }

  removeSubRoutine(i: number){
    console.log(i);
    const control = <FormArray>this.myForm.controls['subroutines'];
    control.removeAt(i);
  }

Answer 1

Turns out my this.routine subroutines array and my forms array were different sizes, because of my initialization in the constructor, fixed that issue and it works perfectly.