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

这令我感到震惊，因为我之前遇到过这种情况，并且一直在摸不着头脑。

重新审视此问题，您需要做的是更改ControlValueAccessor显式写入DOM元素的this.control.valueAccessor.writeValue(upper)而不是控件本身而不是调用

 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

我正在寻找类似这样的东西，但是当我在我的项目中尝试代码时，根据@silentsod给出的上述工作示例，我在第.el.nativeElement.value.toUpperCase（）行上遇到错误。< / p>

我将代码修改为：

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

这是一个分叉的plunker： http://plnkr.co/edit/uf6udp7mQYmnKX6hGPpR?p=preview

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

2 个答案: