Angular Reactive Form, почему valueChanges вызывается перед слушателем ввода

каков порядок событий в случае, если у меня есть реактивная форма и некоторые директивы с hosteListener по нажатию клавиш, нажатию клавиш, нажатию клавиш, вводу и т. д.?

Я создаю реактивную форму с вводимым текстом и директивой, которая принимает ввод и прописывает его:

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

Но метод valueChanges формы вызывается перед директивой, поэтому значение в модели по-прежнему отображается в нижнем регистре.

Спасибо!

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
2
0
727
1

Ответы 1

Это заняло у меня некоторое время, но, наконец, мне удалось его взломать. По сути, мне пришлось взять на себя мост между 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);
  }
}

Другие вопросы по теме