具有不同 [(ngModel)] 输入的 Angular 6 重用表单答案

【问题标题】：Angular 6 reuse form with different [(ngModel)] for inputs具有不同 [(ngModel)] 输入的 Angular 6 重用表单
【发布时间】：2019-03-23 17:11:28
【问题描述】：

我想知道做这种事情的最佳方法是什么，我有这个表格：

 <div class="telefono">
      <label>Telefonos</label>
      <div class="tel" *ngFor="let t of tfonos">
        <div class="row">
          <div class="col-md-2">
            <label for="tfijo">Telefono fijo</label>
            <input type="text" class="form-control" [(ngModel)]="telefono.telFijo" name="tfijo">
          </div>
          <div class="col-md-2">
            <label for="tcel">Telefono Celular</label>
            <input type="text" class="form-control" [(ngModel)]="telefono.telCelular" name="tcel">
          </div>

          <div class="col-md-3">
            <label for="email">E-mail</label>
            <input type="email" class="form-control" [(ngModel)]="telefono.email" name="email">
          </div>         
          </div>
        </div>
      </div>


      <button type="button" (click)="agregar()" class="btn btn-primary">Add</button>

按钮 agregar 向 tfonos 添加了一个元素，因此 div 被复制，问题是 [(ngModel)] 也被复制并将它们绑定在一起，对我来说理想的情况是给每个复制一个不同的 ngModel 实例或类似的东西。

【问题讨论】：

您的问题到底是什么？您似乎已经自己回答了，您需要一个不同的 ngModel 映射。像telefono[some_index_goes_here].telFijo 这样的东西。如果您需要来自ngFor 循环的索引，请参阅this answer（更新部分）。

标签： javascript html angular typescript

【解决方案1】：

您应该将 telefono 实例放入您的 tfonos 数组中。

<div class="telefono">
  <label>Telefonos</label>
  <div class="tel" *ngFor="let t of tfonos; let i = index">
    <div class="row">
      <div class="col-md-2">
        <label for="tfijo">Telefono fijo</label>
        <input type="text" class="form-control" [(ngModel)]="t.telFijo" 
[name]="'tfijo' + i">
     </div>
      <div class="col-md-2">
        <label for="tcel">Telefono Celular</label>
        <input type="text" class="form-control" [(ngModel)]="t.telCelular" 
[name]="'tcel' + i">
      </div>

      <div class="col-md-3">
        <label for="email">E-mail</label>
        <input type="email" class="form-control" [(ngModel)]="t.email" 
[name]="'email' + i">
      </div>         
    </div>
  </div>
</div>

【讨论】：

问题是我使用 tfonos 作为一个不同的数组专门添加表单的重复项，它实际上不是“telefono”类的数组，我将 ngmodel 设置为一个实例一个类，然后将该类推送到一个电话数组。
当您将实例推送到 Telefonos 数组时，您还应该推送 email、telCelular 和 telFijo 属性。希望能帮助到你。否则，我需要查看更多代码。
最后根据你的建议我成功了，非常感谢。