Angular :将输入值重置为之前的值

Question

在 Angular 2+ 中，是否可以通过编程方式将输入值重置为之前的值？

我有“选择”下拉菜单，选择一个值后，如果某些验证失败，我需要将其值重置为前一个值。

如何使用 ngModel(模板表单)和 formControl(响应式(Reactive)表单)实现相同的效果？ (只需要知道这两种方法是否可行)。

我发现，如果我们将 ngModelChange 事件放在模板中 select 标记中的 ngModel 之前，那么在 ngModelChange 事件中，我们会在更改之前获得 ngModel 的值。 引用:https://github.com/angular/angular/issues/11234

但我认为这种方法并不简洁，有时可能会令人困惑。

Answer 1

是的，可以使用响应式(Reactive)表单方法和 rxjs 运算符 pairwise .

使用 rxjs 运算符 pairwise 和 startWith 订阅组件中的 formControl valueChanges

示例代码:

this.myForm.controls['control1'].valueChanges
  .pipe(startWith(1), pairwise()).subscribe(
    ([prevValue, selectedValue]) => {
      console.log(prevValue); // previous value
      console.log(selectedValue); // new value
    }
 );
} 

您还可以检查工作 DEMO

注意:我正在使用 startWith因为，pairwise 当它有两个值(prev 和 current)时会发出值。因此在startWith中添加默认值1(默认选项的值)。