#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 ] < — это то, что я искал. Большое спасибо!