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

【问题标题】：Angular 6 - Common input (change) method, how to tell which model value was modified?Angular 6 - 通用输入（更改）方法，如何判断修改了哪个模型值？
【发布时间】：2019-03-26 11:12:23
【问题描述】：

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

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

我可以为每个输入分配一个唯一的（更改）方法，但我希望所有输入都有一个单一的“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"），但这不会改变模型。

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

有什么想法吗？还是有更好的方法？

谢谢！

【问题讨论】：

reactive forms 怎么样？您可以轻松订阅任何元素（输入）

标签： angular events input angular6

【解决方案1】：

我认为你可以给你的输入一个不同的名称属性，并且名称与你的 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

希望这会有所帮助。

【讨论】：

这么简单！ this.myObject[event.srcElement.name]