Góc 2 Giá trị điều khiển định dạng đầu vào chỉ thị

Question

Tôi có một chỉ thị Angular 2 đơn giản sửa đổi giá trị đầu vào của một hộp văn bản. Lưu ý rằng tôi đang sử dụng phương thức tiếp cận Mẫu theo hướng.

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

    } 

} 

Cập nhật bản cập nhật chính xác, tuy nhiên mô hình cập nhật sau mỗi lần nhấn phím khác. Hãy xem qua số plnkr

Answer 1

Điều này làm tôi kinh ngạc vì tôi đã gặp phải điều này trước đó và bị trầy xước đầu.

Xem xét lại vấn đề này, những gì bạn cần làm là thay đổi this.control.valueAccessor.writeValue(upper) bạn nơi ControlValueAccessor được một cách rõ ràng bằng văn bản cho phần tử DOM và không kiểm soát bản thân để thay gọi

this.control.control.setValue(upper); 

mà sẽ thay đổi giá trị trên điều khiển và được phản ánh chính xác cả trên trang và thuộc tính của điều khiển. https://angular.io/docs/ts/latest/api/forms/index/ControlValueAccessor-interface.html

Một ControlValueAccessor tóm tắt hoạt động của văn bản một giá trị mới đến một phần tử DOM đại diện cho một điều khiển đầu vào.

Dưới đây là một plunker chia hai: http://plnkr.co/edit/rllNyE07uPhUA6UfiLkU?p=preview

Answer 2

tôi đang tìm kiếm một cái gì đó như thế này, nhưng khi tôi đã cố gắng mã trong dự án của tôi, tôi đã nhận được lỗi trên dòng this.el.nativeElement.value.toUpperCase () theo ví dụ làm việc ở trên do @silentsod đưa ra.

tôi sửa đổi mã để:

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

Dưới đây là một plunker chia hai: http://plnkr.co/edit/uf6udp7mQYmnKX6hGPpR?p=preview