Проблема с индексированием при добавлении динамич c Ввод текста в форме в Angular 6

Question

Я добавляю динамическое c текстовое поле ввода по нажатию кнопки, при нажатии кнопки добавления одно поле ввода добавляется в форму. но когда я удаляю любое поле ввода [введите описание изображения здесь] [1], кроме последнего, второй последний ввод становится пустым. Не знаю в чем проблема.

Это HTML part

    <div class="col-sm-8 col-md-5">
      <div
        class="form-row"
        *ngFor="let recommendation of recommendationList; let i=index"
      >
        <div class="form-group float-label-control col-md-11">
          <input
            name="RecommendationNote{{i}}"
            placeholder="Recommendation Note"
            type="text"
            class="form-control"
            [(ngModel)]="recommendation.RecommendationNote"
          />
        </div>
        <div class="col-md-1">
          <span
            class="btn btn-danger"
            (click)="removeRecommendationInput(i)"
            *ngIf="recommendationList.length > 1"
            >Delete</span
          >
        </div>
      </div>
      </div>
      <div class="col-md-12" style="padding-left:0; padding-right: 0;">
        <span class="btn btn-primary" (click)="addRecommendationInput(i)">Add</span>
      </div>
    </div>

Добавление и удаление функций

    addRecommendationInput() {   
        this.recommendationList.push(new GeneralRecommendation());
    }    

    removeRecommendationInput(index) {
        this.recommendationList.splice(index, 1);
    }