Как вызвать функцию после изменение ngModel?

Question

[Ингвар Фон Бьёрк]

Создал примерно такой инпут:
<input type="text" [(ngModel)]="name">

Хотелось бы отследить изменение name через RxJS вместе с его замечательным Observer. В интернетах в основном предлагают использовать (ngChange). Не уж то не существует способа через Observer?

Answer 1

[Антон Швец]

Реактивную форму сделайте, и будет вам Observable
А вообще [(ngModel)] это сахар для [ngModel]="name" (ngModelChange)="name = $event"

А ngChange это из angular.js

Answer 2

[Андрей Саныч]

есть как минимум 2 способа решения для получения нашего любимого Observable

1 способ
Сделать реактивную форму и через valueChanges слушать изменения

2 способ
HTML
<input type="text" [(ngModel)]="name" #myInput>

TS

@ViewChild('myInput') myInput: ElementRef | undefined;

ngAfterViewInit() {
    fromEvent(this.myInput?.nativeElement, 'keyup') // <- тут слушаете событие, которое Вам нравится
      .pipe(
        map((el: any) => el.target.value),
        takeUntil(this.ngUnsubscribe$),
      )
      .subscribe((value: string) => {
        console.log(value);
      });
}

Comments

[Антон Швец]

можно еще через ViewChild получить :)
или снабдить директивой, которая ngControl инжектит.

[Андрей Саныч]

Антон Швец, так я же написал про ViewChild. Или Вы какой-то другой способ?

[Антон Швец]

Андрей Саныч, @ViewChild('myInput', { read: NgControl })