Как заставить Angular 2 [(ngModel)] изменить после изменения входного значения с помощью Javascript?

Question

Я пытаюсь заменить японские символы полуширины на символы полной ширины.

ｳ -> ウ

Поэтому, когда пользователь вводит половинную ширину, мы должны автоматически конвертировать в полную ширину.

Очевидным решением было бы разработать директиву для изменения ngModel при нажатии клавиш.Но у нас огромная кодовая база, и я подумал, что, возможно, @Hostlistener сможет изменить это значение.

@HostListener('document:keyup', ['$event']) onKeydownHandler(event) {
   if (event.target.hasAttribute('type')
       && event.target.attributes['type'].value === 'text') {

    event.target.value = this.changeToFullWidth(event, event.target.value);

  }
}

Однако при этом [(ngModel)] всегда на один символ позади, и я знаю, что это потому, что якасаюсь элемента HTML напрямую.

Есть ли способ сделать это?Или мне придется пойти сложнее, добавив директиву к каждому входному тегу во всем проекте?

Answer 1

Наконец я смог вызвать изменение модели следующим образом:

targetElement.dispatchEvent(new Event('input'), {bubbles: true});

Но обнаружил, что это не работает в Edge для CKEditor.

Для этого мы можем использоватьдирективное и модельное обслуживание

...
constructor(
        ...
        private model:NgModel,
        ...
    ){
...
onInputChange($event){
...
   this.model.valueAccessor.writeValue(this.changeText(modelValue));
...
}