Question

如果我有一个反应形式，并且在keyup，keydown，keypress，input等上有一些hosteListener指令，那么事件的顺序是什么？

我正在创建一个带有输入文本和指令的反应式表单，该指令接受输入并将其大写：

@HostListener('input')
onInput() {
  if (this.uppercase) {
    this.el.nativeElement.value = this.el.nativeElement.value.toUpperCase();
  }
}

但是在指令之前调用表单的valueChanges方法，因此模型中的值仍然是小写的。

谢谢！

Answer 1

这花了我一段时间，但最终我设法破解了它。基本上，我必须承担DOM与模型之间的桥梁。除非您为Control / Directive实现ControlValueAccessor，否则Angular会为您完成此操作。这样，只要您认为合适，就可以负责更改模型（从而将侦听器触发到valueChanges）：

export const MASK_CONTROL_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => MaskDirective),
  multi: true
};

@Directive({
  selector: "[testMask]",
  providers: [MASK_CONTROL_VALUE_ACCESSOR]
})

export class MaskDirective implements ControlValueAccessor {

  private onChange;
  private nativeElement;

  constructor(private element: ElementRef) {
    this.nativeElement = this.element.nativeElement;
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }
  registerOnTouched(fn: any): void {
  }
  setDisabledState(isDisabled: boolean): void {
    this.nativeElement.disabled = isDisabled;
  }
  writeValue(newValue) {
    newValue = newValue == null ? "" : newValue;
    this.nativeElement.value = newValue;
  }
  @HostListener("input", ["$event"])
  onInput(event: KeyboardEvent) {
    /*DO YOUR STUFF HERE*/
    // Call onChange to fire the valueChanged listeners
    this.onChange(newValue);
  }
}

Angular Reactive Form为什么在输入监听器之前调用valueChanges

1 个答案: