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

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

Answer 1

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

Наилучшим подходом будет использование валидатора, упомянутого @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 2

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

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

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