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

我有一個簡單的Angular 2指令，用於修改文本框的輸入值。請注意，我使用的是模型驅動的表單方法。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

來源

2016-11-18 Mike Lunn

這讓我很興奮，因爲我之前遇到過這種情況，並且一直在困擾着我。

重新審視這個問題，你需要做的是改變你的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

來源

2016-11-18 17:51:14 silentsod

真棒！感謝您的解釋。 –

角色位置怎麼樣？按鍵發送字符位置到輸入結束。 – Skyler

@silntsod你有什麼想法，如何使用它與模板驅動的形式？與ngModel – Vishal

我一直在尋找這樣的事情，但是當我在我的項目嘗試代碼我就行了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

來源

2017-07-26 20:04:56 gocasco

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

回答

相關問題