Угловой 6 - Общий метод ввода (изменения), как определить, какое значение модели было изменено?

Question

Я ищу способ изменить входное значение, которое будет сохранено в модели.

Например, я хотел бы изменить строку в верхний регистр, когда пользователь вводит данные.Или, возможно, сделать какую-то подстановку определенных символов.

Я мог бы назначить уникальный метод (изменение) для каждого ввода, но я хотел бы иметь один метод "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 = «что угодно»), но это не меняет модель.

Я думаю, я мог бы также реализовать установщик в классе модели, но яМне интересно, как это сделать только с входными событиями (это может пригодиться когда-нибудь).

Есть идеи?Или есть лучший подход?

Спасибо!

Answer 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

Надеюсь, это помогло.