Angular 2 – 在@HostListener(‘blur’)的自定义指令中更新ngMo

发布时间：2020-12-17 07:14:56 所属栏目：安全来源：网络整理

导读：我有一个只接受数字的自定义指令.当我输入1.2时,它很好.但是当我只键入1.我想要删除输入的1. on blur.我已经尝试了几种方法来如何将值设置为onBlur中的空字符串,但仍然没有运气.这是代码片段： @Output() ngModelChange = new EventEmitter();constructor(el

我有一个只接受数字的自定义指令.当我输入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值设置为空字符串.我怎么能在模糊中做到这一点？

谢谢！

解决方法

您可以在元素上创建并触发更改事件,以告知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]);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!