Угловая директива ввода 2 Изменение значения управления формы

Question

У меня есть простая директива Angular 2, которая изменяет входное значение текстового поля. Обратите внимание, что я использую подход Model-Driven.

@Directive({ 
    selector: '[appUpperCase]' 
}) 
export class UpperCaseDirective{ 

    constructor(private el: ElementRef, private control : NgControl) { 

    } 

    @HostListener('input',['$event']) onEvent($event){ 
    console.log($event); 
    let upper = this.el.nativeElement.value.toUpperCase(); 
    this.control.valueAccessor.writeValue(upper); 

    } 

} 

Домен обновляется должным образом, однако модель обновляется после каждого нажатия клавиши. Взгляните на plnkr

Answer 1

Это волнует меня, потому что я столкнулся с этим раньше и остался царапать голову.

Пересматривая вопрос, что вам нужно сделать, это изменить this.control.valueAccessor.writeValue(upper) где ControlValueAccessor явно писать к элементу DOM, а не самого элемента управления, чтобы вместо этого позвонить

this.control.control.setValue(upper); 

, который изменит значение на контроль и правильное отражение как на странице, так и в элементе управления. https://angular.io/docs/ts/latest/api/forms/index/ControlValueAccessor-interface.html

ControlValueAccessor абстрагирует операции записи нового значения к элементу DOM, представляющего собой входной контроль.

Вот раздвоенный plunker: http://plnkr.co/edit/rllNyE07uPhUA6UfiLkU?p=preview

Answer 2

Я искал что-то вроде этого, но когда я попробовал код в моем проекте я получаю ошибки на линии this.el.nativeElement.value.toUpperCase () в соответствии с рабочим примером выше, данным @silentsod.

Я внес изменения в код:

let str:string = this.control.value; 
this.control.control.setValue(str.toUpperCase()); 

Вот раздвоенный plunker: http://plnkr.co/edit/uf6udp7mQYmnKX6hGPpR?p=preview