Angular 2 输入指令修改表单控件值

Posted 2023-02-22

【中文标题】Angular 2 输入指令修改表单控件值

【英文标题】：Angular 2 Input Directive Modifying Form Control Value

【发布时间】：2017-04-02 15:17:45

【问题描述】：

我有一个简单的 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

【参考方案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

【讨论】：

太棒了！谢谢你的解释。

字符位置呢？按键将字符位置发送到输入的末尾。

@silntsod 你有什么想法，如何将它与模板驱动的表单一起使用？使用 ngModel

感谢您的精彩回答

【参考方案2】：

我一直在寻找类似的东西，但是当我在我的项目中尝试代码时，根据@silentsod 给出的上述工作示例，我在 this.el.nativeElement.value.toUpperCase() 行上遇到了错误。

我将代码修改为：

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

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