在Angular 6中添加表单中的动态输入文本时出现索引问题



我在点击按钮时添加动态输入文本框,当点击添加按钮时,一个输入框被添加到表单中。但当我删除除最后一个以外的任何输入框[在此处输入图像描述][1]时,倒数第二个输入变为空。不知道问题出在哪里。

这是HTML部分


<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);
}

Add[ngModelOptions]="{standalone:true}";这将解决您的问题。

最新更新