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双向数据绑定的介绍非常有帮助。