Angular 2 - 在@HostListener（'blur'）的自定義指令中更新ngModel

Question

我有一個只接受數字的自定義指令。 當我輸入1.2時，它很好。 但是當我只鍵入1.我想要刪除輸入的1. on blur。 我已經嘗試了幾種方法來如何將值設置為onBlur空字符串，但仍然沒有運氣。 這是代碼片段：

@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('');
 } 
}

這會擦除輸入字段中的1. 但是當我打印出保存數據的ngModel的值時，值為1

在這種情況下，我想將ngModel值設置為空字符串。 我怎么能在模糊中做到這一點？

謝謝！

Answer 1

您可以在元素上創建並觸發更改事件，以告知angular更新模型值。

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

我認為prober解決方案可能正在使用自定義表單控件 。 但是我從來沒用過它們。

解雇this.change.emit(event); 應該做的事情，並為我工作。 神奇的是你發出事件而不是值 ，而改變的值必須在event.target.value中。

所以舉個例子

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

所以你可以試試：

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

詳細閱讀我認為這篇博文作為angular2雙向數據綁定的介紹非常有幫助。