Question

我有一个反应式。当我输入文字并停止3秒钟时-应该console.log(form.value)。但是，当我单击submit时-console.log(form.value)应该立即记录下来，并且还应避免使先前的console.log()等待3秒。然后，当我键入-而不是按submit时-它应该在3秒钟后再次console.log()。

我是RxJ的新手。我刚刚想出了如何使用debounceTime()运算符制作第一部分。但是我无法确定如何将提交事件“注入”到表单流中并阻止它console.log();

Link on stackblitz

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

因此，在流中进行思考，我们有：

提交流
一系列去抖动的更改事件

我们要避免重复事件。因此，我们合并两个流，并添加distinctUntilChanged运算符以避免重复值。我们进行序列化/反序列化，因为我们不希望对实例（但值）进行操作。

要在此组件销毁时清理我们的订阅，我们使用takeUntil自动关闭可观察对象，这将自动处理我们的订阅（始终清理订阅！）

注意：更改值，等待4秒钟，然后单击“提交”将不会触发订阅。我认为这是故意的行为。

Answer 2

提交表单后，您只需在Observable中unsubscribe。

Check it out

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);
  }
}

如何在RxJ中合并两个流以及更多？

2 个答案: