каков порядок событий в случае, если у меня есть реактивная форма и некоторые директивы с hosteListener по нажатию клавиш, нажатию клавиш, нажатию клавиш, вводу и т. д.?
Я создаю реактивную форму с вводимым текстом и директивой, которая принимает ввод и прописывает его:
@HostListener('input')
onInput() {
if (this.uppercase) {
this.el.nativeElement.value = this.el.nativeElement.value.toUpperCase();
}
}
Но метод valueChanges формы вызывается перед директивой, поэтому значение в модели по-прежнему отображается в нижнем регистре.
Спасибо!





Это заняло у меня некоторое время, но, наконец, мне удалось его взломать. По сути, мне пришлось взять на себя мост между DOM и моделью. Angular сделает это за вас, если вы не реализуете ControlValueAccessor для своего Control / Directive. Таким образом, вы отвечаете за изменение модели (и тем самым запускаете слушателей в 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);
}
}