Angular 7 FormControl on valueChanges 获取旧值

Question

我在 @Input 参数中传递了一个 formControl，该参数绑定到最大值应为 10 的数字类型的输入。当用户键入更大的数字时，不应更改输入值。

阻止事件传播或获取旧值并重新设置的方法是什么？

我尝试了堆栈和 github 中的许多其他解决方案，但没有解决我的问题。

 valuecontrol: FormControl = new FormControl(0);

  constructor(){
    this.control.valueChanges.pipe(distinctUntilChanged()).subscribe(newValue=>{
      if(newValue >= 10){
        // set previous value
        const oldValue = this.control.value;
        console.log("old value = ", oldValue)
        this.control.patchValue(oldValue);
      }
    })
  }.

演示：https://stackblitz.com/edit/angular-6ocjfj?file=src/app/app.component.ts

Answer 1

将输入控件上的 [max] 属性设置为 10:

<input type="number" [max]="10" [formControl]="control">

这样您就可以完全删除 newValue >= 10 条件。

Answer 2

新值更新为 FormControl 值后会触发 valueChanges 事件，这就是您无法获取旧值的原因。

最好的方法是使用 @JB Nizet 提到的验证器。

如果您想继续您的解决方案，那么您可以利用 Angular 的 ngDoCheck 生命周期挂钩来保留旧值。

修改后的代码：

export class AppComponent implements DoCheck {
  private oldValue;
  control: FormControl = new FormControl(0);

  constructor() {
    this.control.valueChanges.pipe(distinctUntilChanged()).subscribe(newValue => {
      if (newValue >= 10) {
        // set previous value
        console.log("old value = ", this.oldValue)
        this.control.patchValue(this.oldValue);
      }
    })


  }
  ngDoCheck() {
    this.oldValue = this.control.value
  }
}

StackBlitz

Answer 3

经过一年多的经验，我认为我找到了最佳解决方案。要解决这个问题，最好的方法可能是使用 pairwise rxjs operator

感谢您能够获得流的先前值。

提供的代码片段没有解决原始问题，因为它需要几个额外的步骤，但它解决了 "How to get the old value?".

上的原始问题

代码来了：

control: FormControl = new FormControl(0);

  constructor(){
    this.control.valueChanges.pipe(
      distinctUntilChanged(),
      pairwise() // gets a pair of old and new value
    ).subscribe(([oldValue, newValue])=>{
      console.log(oldValue, newValue)
      if(newValue >= 10){
        // set previous value
        this.control.patchValue(oldValue);
      }
    })
  }

活码：https://stackblitz.com/edit/angular-tfrstg

Angular 7 FormControl on valueChanges 获取旧值

Angular 7 FormControl on valueChanges get old value

angular

angular-reactive-forms

angular7