Angular 2 - Zaktualizuj ngModel wewnątrz niestandardowej dyrektywy @HostListener ("rozmycie")

Question

Mam niestandardową dyrektywę, która akceptuje tylko numer. Kiedy wprowadzam 1.2, jest dobrze. Ale kiedy wpisuję tylko 1. Chcę wymazać wprowadzony 1. na rozmycie. Próbowałem na kilka sposobów, aby ustawić wartość pustego ciągu wewnątrz onBlur, ale wciąż nie ma szczęścia. Oto fragment kodu:

@Output() ngModelChange = new EventEmitter(); 

constructor(el: ElementRef, public model: NgControl){ 
//Instead of NgControl, I have also tried the NgModel but it did not work 
this.el = el.nativeElement; 
} 

@HostListener('blur', ['$event']) onBlur($event){ 
if(isNaN(this.el.value.replace(/(,)/g, '')) || this.el.value[this.el.value.length - 1] === '.' || this.el.value[this.el.value.length - 1] === '-'){ 
    this.el.value = ''; 
    this.model.control.updateValue(''); 
    this.model.viewToModelUpdate(''); 
    this.ngModelChange.emit(''); 
} 
} 

Spowoduje to usunięcie 1. w polu wejściowym. Ale kiedy wydrukuję wartość ngModel, która przechowuje dane, wartość to 1

W takim przypadku chcę ustawić wartość ngModel na pusty ciąg znaków. Jak mogę to zrobić w rozmycie?

Dziękujemy!

Answer 1

Można utworzyć i wywołać zdarzenie zmiany na elemencie, aby poinformować o wartościach kątowych, aby zaktualizować wartość modelu.

let event: Event = document.createEvent("Event"); 
event.initEvent('input', true, true); 
Object.defineProperty(event, 'target', {value: this.el.nativeElement, enumerable: true}); 
this.renderer.invokeElementMethod(this.el.nativeElement, 'dispatchEvent', [event]); 

Answer 2

Myślę, że rozwiązanie próbnika może używać custom form controls. Jednak nigdy ich nie użyłem.

Wypalanie this.change.emit(event); powinno zrobić to i działa dla mnie. Magia polega na tym, że emitujesz zdarzenie o wartościi , a zmieniona wartość musi znajdować się w polu event.target.value.

Tak na przykład

let onChangeCallback = (e) => { 
    console.log("change", e); 
    this.ngModelChange.emit(e); 
    this.change.emit(e) 
}; 

więc może chcesz spróbować:

$event.target.value = "", 
this.change.emit($event); 

Szczegółowe czytania Pomyślałem tego blogu jako introduction into angular2 two way data binding bardzo pomocny.