Angular 2输入指令修改表格控制值

Question

我有一个简单的Angular 2指令,它修改了文本框的输入值.请注意,我正在使用模型驱动的表单方法.

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

  }

}

dom正确更新,但模型会在每次其他击键后更新.看看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