angular4更改表单中显示的值_Angular 2输入指令修改表单控制值

I have a simple Angular 2 directive that modifies the input value of a textbox. Note that i'm using the Model-Driven form approach.

@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);

}

}

The dom updates properly, however the model updates after every other keystroke. Take a look at the plnkr

解决方案

This thrills me because I encountered this earlier and was left scratching my head.

Revisiting the issue, what you need to do is to change your this.control.valueAccessor.writeValue(upper) where the ControlValueAccessor is explicitly writing to the DOM element and not to the control itself to instead call

this.control.control.setValue(upper);

which will change the value on the control and be correctly reflected both on the page and in the control's property.

https://angular.io/docs/ts/latest/api/forms/index/ControlValueAccessor-interface.html

A ControlValueAccessor abstracts the operations of writing a new value

to a DOM element representing an input control.