Как объединить два потока в RxJ и немного больше?

Question

У меня реактивная форма. Поскольку я печатаю и останавливаюсь на 3 секунды - это должно console.log(form.value). Но когда я нажимаю submit & mdash; console.log(form.value) должен быть зарегистрирован немедленно, а также предотвращать создание предыдущего console.log(), который ждал в течение 3 секунд. И после того, как я набираю - а не нажимаю submit - он должен console.log() через 3 секунды снова.

Я довольно новичок в RxJs. Я только что понял, как сделать первую часть, используя оператор debounceTime(). Но я не могу понять, как «внедрить» событие отправки в поток формы и предотвратить его от console.log();

Ссылка на стек стлиц

component.html

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input type="text" formControlName="name" placeholder="name"><br>
  <input type="text" formControlName="age" placeholder="age"><br>

  <button>Save</button>
</form>

component.ts

export class AppComponent implements OnInit  {
  form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      'name': [],
      'age': []
    });

    this.form.valueChanges.pipe(
      debounceTime(3000)
    ).subscribe(value => console.log(value));
  }

  onSubmit() {
    console.log(this.form.value);
  }
}

Ожидаемое поведение:

когда я печатаю, остановитесь на 2 секунды - ничего не произойдет, если я остановлюсь затем на 3 секунды или более, чем console.log(form.value);

При нажатии submit следует сразу console.log(form.value) и отменить предыдущее ожидание первого случая.

Answer 1

Решение: https://stackblitz.com/edit/angular-gn1dwx

Итак, думая в потоках, мы имеем:

• Поток подчиняется
• поток отклоненных событий изменений

Мы хотим избежать повторяющихся событий. Итак, мы объединяем наши 2 потока и добавляем оператор diverUntilChanged, чтобы избежать дублирования значений. Мы сериализуем / десериализуем, так как мы не хотим, чтобы разные работали с экземплярами, а только со значениями.

Чтобы очистить нашу подписку, когда этот компонент уничтожен, мы используем takeUntil для автоматического закрытия наблюдаемой, которая автоматически позаботится о нашей подписке (всегда очищайте подписки!)

Примечание: изменение значения, ожидание в течение 4 секунд и затем нажатие кнопки «Отправить» не вызовет подписку. Я предполагаю, что это предполагаемое поведение.

Answer 2

Вы можете просто unsubscribe из наблюдаемого при отправке формы.

Проверить

export class AppComponent implements OnInit  {
  form: FormGroup;

  subscription;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      'name': [],
      'age': []
    });

    this.subscription = this.form.valueChanges.pipe(
      debounceTime(3000)
    ).subscribe(value => console.log(value));
  }

  onSubmit() {
    this.subscription.unsubscribe();
    console.log(this.form.value);
  }
}