如何在使用动态名称生成时避免具有相同 ID/名称的不同 html 元素答案

【问题标题】：How to avoid different html element with same ID/Name while using dynamic name generation如何在使用动态名称生成时避免具有相同 ID/名称的不同 html 元素
【发布时间】：2019-05-14 05:04:30
【问题描述】：

我正在尝试开发一个角度应用程序。我使用数组中的 ngFor 动态生成输入 html 元素，并且我将元素的 ID 提供为 inputElem_{{index}}。如果我试图删除倒数第二个元素并添加新元素，我将得到两个输入框中给出的具有相同名称和值的两个元素被清空并在 ui 中显示为无效

<i class="fa fa-add" (click)="addElem()"></i>
<div class="row" *ngFor="let elemName of elemList; let index=index;">
  <div class="col-md-8">
     <input id="inputElem_{{index}}" name="inputElem_{{index}}" required
        [(ngModel)]="elemName.name"/>
  </div>
  <div class="col-md-2">
     <i class="fa fa-delete" (click)="deleteElem(index)"></i>
  </div>
</div>

deleteElem(index: number) {
   this.elemList.splice(index, 1);
}
addElem() {
   const elem = new Elem();
   this.elemList.push(elem);
}

【问题讨论】：

当您想创建动态输入表单输入时，您可以使用 Reactive Form 来创建它，即使用 FormGroup 和 FormArray 通过使用它不会出错
您能否提供一个 Stackblitz 示例并更具体地解释您想要实现的目标？您是想让 HTML 元素 id 等于对象索引还是相反？
@ravi 更改为响应式表单将占用大量时间，因为应用程序很大，而且我在每个角落都使用这种方法。请在不改变这种方法的情况下帮助我解决问题
@Jojofoulk stackblitz.com/edit/…

标签： html angular

【解决方案1】：

HTML 元素名称和 id 应该是唯一的。这里名称和索引不是唯一的，因为在执行任何数组更改（插入和删除项目）时都会创建具有非唯一 ID/名称的元素

<div class="row" *ngFor="let elemName of elemList; let index=index;">
  <div class="col-md-8">
     <input id="inputElem_{{elemName.id}}" name="inputElem_{{elemName.id}}" required
        [(ngModel)]="elemName.name"/>
  </div>
  <div class="col-md-2">
     <i class="fa fa-delete" (click)="deleteElem(index)"></i>
  </div>
</div>

尝试使用 Math.random()

创建唯一 ID

export class Elem {
   name: string;
   id: string;
   constructor() {
      this.id = Math.random().toString(36).subStr(2, 9);
   }
}

Solution reference

【讨论】：