具有相同ngModel的多个文本框

Question

我的对象将决定运行时文本框的数量。并且所有这些文本框都具有相同的ngModel名称。 [（ngModel）] =“ childComment”。功能明智的作品。但是当我在一个文本框中编写内容时，它会显示在所有文本框中吗？谢谢

<mat-form-field class="removetopmargin">
<input matInput  [(ngModel)]="childComment" placeholder="Reply here ..">
</mat-form-field>

Answer 1

如果您确实希望将相同的值绑定到相同的属性，则在模糊时更新该值，而不是使用ngModel。

<input matInput  [value]="childComment" (blur)="childComment = $event.target.value" placeholder="Reply here ..">

这意味着在您键入内容时，值不会更新，直到您移至另一个字段并触发了模糊事件处理程序。

在此处查看演示

https://stackblitz.com/edit/angular-stfyru?file=src%2Fapp%2Fapp.component.html

Answer 2

 [(ngModel)]="childComment"

两种方式绑定到组件的属性childComment。如果多个控件是通过两种方式绑定到同一属性，则它们都将显示相同的值。您需要为每个控件绑定一个不同的属性。

您可以有一个数组并遍历

controls = [
  { name: 'time', value: null },
  { name: 'fast', value: null }
];

并在您的模板中

<mat-form-field class="removetopmargin" *ngFor="let control of controls">
  <input [name]="control.name" [(ngModel)]="control.value" placeholder="Reply here ..">
</mat-form-field>

Answer 3

尝试为每个输入定义不同的名称，例如：

<input matInput [name]="dynamicNameHere" [(ngModel)]="childComment" placeholder="Reply here ..">

Answer 4

您将一个模型绑定到某些输入。因此，每次您想写东西时，由于它们绑定到相同的变量，因此结果是相同的。