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

我认为探针解决方案可能正在使用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非常有帮助。

Angular 2 - 在@HostListener的自定义指令中更新ngModel（＆＃39;模糊＆＃39;）

2 个答案: