Angular 2 - 在 @HostListener('blur') 的自定义指令中更新 ngModel答案

【问题标题】：Angular 2 - Update ngModel inside a custom directive at @HostListener('blur')Angular 2 - 在 @HostListener('blur') 的自定义指令中更新 ngModel
【发布时间】：2017-01-02 18:43:41
【问题描述】：

我有一个只接受数字的自定义指令。当我输入1.2时，它很好。但是当我只输入 1. 我想擦除输入的 1. 模糊。我已经尝试了几种方法来将值设置为 onBlur 中的空字符串，但仍然没有运气。这是代码sn-p：

@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 值设置为空字符串。如何在模糊中做到这一点？

谢谢！

【问题讨论】：

标签： angular directive

【解决方案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]);

【讨论】：

我宁愿选择this.ngModelChange.emit('$event);，就像我的回答一样。 dispatchEvent 可能有效，但它是测试代码的一部分，因此我认为 ngModelChange 是处理此问题的正确方法。

【解决方案2】：

我认为探测器解决方案可能正在使用custom form controls。但是我从来没有使用过它们。

解雇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);

对于详细阅读，我认为这篇博文introduction into angular2 two way data binding 非常有帮助。

【讨论】：