动态更新输入时如何检测其值变化(角度6) [英] How to detect a value change on an input when it is dynamically updated (Angular 6)

问题描述

我正在使用自定义指令和自定义管道对文本输入进行货币格式化.它可以与任何类型的直接用户输入(焦点，模糊，抠像)一起正常工作.但是，当值动态更改时，我似乎无法捕获更改事件.我也找不到可靠的hostlistener事件列表，也不知道捕获输入中任何事件的方法(因此看不到正在发生什么事件).

I'm using a custom directive and custom pipe to do currency formatting on text inputs. It works fine with any kind of direct user input (focus, blur, keydown). However I can't seem to capture the change event when the value is changed dynamically. I also can't find a reliable list of hostlistener events, and don't know of a way to capture any event coming to the input (and thus can't see what event, if any, is happening).

动态地，该值是使用patchValue设置的，并且我已经将emitEvent设置为true，但这似乎什么也没做(无论如何我还是默认认为是真的):

Dynamically, the value is being set with patchValue, and I've set emitEvent to true but this appears to do nothing (I assume it's true by default anyway):

myInput.patchValue({content: currentContent}, { emitEvent: true });

我可以在使用patchValue设置内容值之前重写货币格式，但这有损于可重用性.

I could rewrite the currency formatting before the content value is set with patchValue, but this goes against reusability.

这是我的指令:

import { Directive, HostListener, ElementRef, OnInit } from '@angular/core';
import { CurrencyPipe } from '../pipes/currency.pipe';

@Directive({
    selector: '[appCurrency]'
})
export class CurrencyDirective implements OnInit {

constructor(
    private elementRef:ElementRef,
    private formatcurrencypipe:CurrencyPipe
) { }

ngOnInit(){
    //this.elementRef.nativeElement.value = this.formatcurrencypipe.transform(this.elementRef.nativeElement.value);
}

@HostListener("change", ["$event.target.value", "$event"]) onChange(value, event) {
    //this.elementRef.nativeElement.value = this.formatcurrencypipe.parse(value);
}

@HostListener("valueChange", ["$event.target.value", "$event"]) onValueChange(value, event) {
    console.log('in onValueChange');
    //doesn't trigger when the value is changed dynamically
}

@HostListener("focus",["$event.target.value","$event"]) onFocus(value,event) {
    console.log('in focus');
    this.elementRef.nativeElement.value = this.formatcurrencypipe.parse(value);
    if(event.which == 9)
    {
        return false;
    }
    this.elementRef.nativeElement.select();
}

@HostListener("blur", ["$event.target.value"]) onBlur(value) {
    console.log('in blur');
    this.elementRef.nativeElement.value = this.formatcurrencypipe.transform(value);
}

@HostListener('keydown', ['$event']) onKeyDown(event) {
    let e = <KeyboardEvent> event;
    console.log('e.keyCode: ', e.keyCode, e.ctrlKey, e.metaKey);
    //delete, backspace, tab, escape, enter, decimal, period, arrow left, arrow right
    if ([46, 8, 9, 27, 13, 110, 190, 37, 39].indexOf(e.keyCode) !== -1
    || (e.keyCode === 65 && (e.ctrlKey || e.metaKey)) //CTRL + A
    || (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) //CTRL + C
    || (e.keyCode === 86 && (e.ctrlKey || e.metaKey)) //CTRL + V
    || (e.keyCode === 88 && (e.ctrlKey || e.metaKey))) {  //CTRL + X
        //do nothing
        return;
    }

    // Check for number
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
    }
}
}

我在此处添加了堆栈闪电: https://stackblitz.com/edit/angular-tys9cy

I've added the stackblitz here: https://stackblitz.com/edit/angular-tys9cy

推荐答案

诸如 FormGroup 和 FormControl 的活动表单实例具有 valueChanges 方法，返回发出最新值的 observable .它不会发出DOM事件.
解决方案

Reactive form instances like FormGroup and FormControl have a valueChanges method that returns an observable that emits the latest values. It does not emit a DOM event.
Solution

绑定到 ngModelChange 而不是 valueChange ，这两个事件都将在两个事件上触发，即，在View中或通过模型更新formControl时.

Instead of valueChange bind to ngModelChange that will be triggered on both events i.e. when formControl is updated in View or via Model.

@HostListener("ngModelChange", [ "$event"]) onNgModelChange(value) {
         console.log(value)
    this.elementRef.nativeElement.value = this.formatcurrencypipe.transform(value);
}

正在工作的StackBlitz

这篇关于动态更新输入时如何检测其值变化(角度6)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！