时间戳

首页 > 解决方案 > Angular 6 - 通用输入（更改）方法，如何判断修改了哪个模型值？

angular - Angular 6 - 通用输入（更改）方法，如何判断修改了哪个模型值？

问题描述

我正在寻找一种方法来修改将存储在模型中的输入值。

例如，当用户输入输入时，我想将字符串更改为大写。或者，也许，对某些字符进行某种替换。

我可以为每个输入分配一个唯一的（更改）方法，但我希望所有输入都有一个“dealWithInput($event)”方法。

所以输入将是这样的：

<input name="description" type="text" [(ngModel)]="myObject.description" (change)="dealWithInput($event)"/>
<input name="description" type="text" [(ngModel)]="myObject.name" (change)="dealWithInput($event)"/>
…

然后在component.ts中：

dealWithInput(event) {
    //do some magic to alter the value of myObject.description
    // or myObject.name
    // or …
}

我怎么知道要更改哪个字段？我尝试修改输入（类似于 event.target.value = "whatever"），但这不会改变模型。

我想我也可以在模型类中实现一个设置器，但我很好奇如何仅使用输入事件来做到这一点（它可能有一天会派上用场）。

有任何想法吗？还是有更好的方法？

谢谢！

标签： angulareventsinputangular6

解决方案

我认为您可以为输入提供不同的名称属性，并且名称与 myObject 的键相同

<input name="description" type="text" [(ngModel)]="myObject.description" (change)="dealWithInput($event)"/>

<input name="name" type="text" [(ngModel)]="myObject.name" (change)="dealWithInput($event)"/>

然后在 dealWithInput() 中，您可以使用此名称来更改您更改的值

  public dealWithInput(event) {
    console.log(event.srcElement.name);
    this.myObject[event.srcElement.name] = 'new event';
  }

这是代码： https ://stackblitz.com/edit/angular-gg53hm

希望这有帮助。

推荐阅读