Angular 7 FormControl на valueChanges получить старое значение

Question

Я получил форму FormControl передан в @Input параметр, который ограничен вводом числового типа, максимальное значение должно быть 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

Я думаю, что после года опыта я нашел оптимальное решение. Для решения этой проблемы, вероятно, лучшим способом было бы использоватьpairwise rxjs оператор

Благодаря этому вы можете получить предыдущее значение потока.

Предоставленный фрагмент не решает исходную проблему, поскольку потребует нескольких дополнительных шагов, но решает исходный вопрос "Как получить старое значение?".

Вот код:

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

Answer 2

valueChanges Событие запускается после обновления нового значения до значения FormControl, поэтому вы не можете получить старое значение.

Наилучший подход - использовать валидатор, упомянутый @JB Nizet.

Если вы хотите продолжить свое решение, то вы можете использовать Angular's 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

Установить [max] атрибут в элементе управления вводом 10:

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

Таким образом, вы можете удалить newValue >= 10 состояние целиком.