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

#angular #events #input #angular6

#angular #Мероприятия #ввод #angular6

Вопрос:

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

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

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

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

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

Спасибо!

Комментарии:

1. Как насчет реактивных форм ? Вы можете легко подписаться на любой элемент (ввод)

Ответ №1:

Я думаю, вы могли бы присвоить вашему вводу другой атрибут name, имя которого совпадает с вашим ключом 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

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

Комментарии:

1. Так просто! this.MyObject[event.srcElement.name ] < — это то, что я искал. Большое спасибо!