如何在RxJs中组合两个流以及更多？

我有一种反应形式。当我输入并停止3秒钟时，它应该

console.log（form.value）

。但是，当我单击

submit

-

console.log（form.value）

时，应立即记录日志，并防止在等待3秒的时间内进行上一次

console.log（）

。当我输入时，不要按

submit

，它应该在3秒钟后再次

console.log（）

我是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>

预期行为：

当我打字时，停止2秒-如果我停止3秒或更长时间，则什么也不会发生，然后

console.log（form.value）

---

当按下

submit

时，应立即

console.log（form.value）

并取消之前对第一个案例的等待。

在提交表单时，您只需

取消订阅即可


导出类AppComponent实现OnInit{
表格：表格组；
订阅
构造函数（私有fb:FormBuilder）{}
恩戈尼尼特（）{
this.form=this.fb.group({
“名称”：[]，
‘年龄’：[]
});
this.subscription=this.form.valueChanges.pipe(
去BounceTime（3000）
).subscribe（值=>console.log（值））；
}
onSubmit（）{
this.subscription.unsubscripte（）；
console.log（this.form.value）；
}
}
解决方案：

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


一连串的提交
一连串的脱口而出的变化事件

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

为了在该组件被销毁时清理订阅，我们使用takeUntil自动关闭observable，它将自动处理我们的订阅（始终清理订阅！）

注意：更改值、等待4秒然后单击“提交”不会触发订阅。我想这是故意的行为。
您好，谢谢您的回复。但这个实现的问题是，在您单击“提交”之后，“自动保存”功能不再工作。但在单击Submit之后，它仍然应该可以工作。
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);
  }
}