时间戳

首页 > 解决方案 > ngModel 反映到所有文本区域

javascript - ngModel 反映到所有文本区域

问题描述

我有多个 textareas（使用 ngFor 循环并在里面添加带有 textareas 的新 div）。我需要的是每个文本区域都有单独的 ngModel，我不想直接将它绑定到 dataArray 中对象的属性 - 例如：

[(ngModel)]='data.note' or [(ngModel)]='data.feedback' .

这可行，但我在 dataArray 中没有反馈属性，因此它不适用于第二个 textarea。

例如，我当前在一个文本区域中的实现更改反映在所有其他文本区域中。我尝试使用索引方法但出现错误：

ERROR TypeError: Cannot read property '1' of undefined

<div *ngFor="let data of dataArray; let index=index;trackBy:trackByIndex;">
<div class="card-body">
  <form class="form">
    <div class="form-body">
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <textarea name="note" [(ngModel)]='selectedNote' class="form-control"
              rows="2"></textarea>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="form-group">
            <textarea name="feedback" [(ngModel)]='selectedFeedback' class="form-control" rows="4"></textarea>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

使用当前代码，如果我在名称为“note”的第一个 textarea 中添加一些文本，则该更改将反映在所有名称为“note”的 textarea 中。如前所述尝试添加

[(ngModel)]='selectedFeedback[index]' but i am getting error.

还尝试为 textareas 赋予不同的名称：

<textarea name="note{{index}}" [(ngModel)]='dataArray[index]' rows="2"></textarea> OR

  <textarea name="note{{index}}" [(ngModel)]='selectedNote' rows="2"></textarea>

但是变化再次反映了每个文本区域。

标签： javascripthtmlangular

解决方案

ngModel 与 name 属性绑定。因此，如果您想使用多个文本区域，请尝试使用不同的名称属性。你可以像这样迭代 -

<ng-container *ngIf="let data of dataArray; index as i">
   <textarea name="feedback_{{i}}" [(ngModel)]='selectedFeedback' class="form-control" rows="4"></textarea>
</ng-container>

推荐阅读