web-dev-qa-db-fra.com

Angular 7 FormControl sur valueChanges obtenir l'ancienne valeur

J'ai reçu un formControl passé dans le paramètre @Input qui est lié à une entrée de type nombre et dont la valeur maximale doit être 10 . Lorsque l'utilisateur tape un nombre plus grand, il ne devrait pas changer la valeur d'entrée.

Quel est le moyen d'empêcher la propagation d'événements ou d'obtenir l'ancienne valeur et de la définir à nouveau?

J'ai essayé beaucoup d'autres solutions de stack et github, mais rien ne résout mon problème. 

 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

angularangular-reactive-formsangular7
2
karoluS

L'événement valueChanges est déclenché après la mise à jour de la nouvelle valeur avec la valeur FormControl, c'est pourquoi vous ne pouvez pas obtenir l'ancienne valeur.

La meilleure approche serait d'utiliser un validateur comme mentionné par @JB Nizet.

Si vous souhaitez continuer avec votre solution, vous pouvez utiliser le crochet Cycle de vie/- ngDoCheck cycle de vie pour conserver l'ancienne valeur.

Code modifié:

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

1
Vikas

Définissez un attribut [max] sur le contrôle d'entrée sur 10:

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

De cette façon, vous pouvez supprimer complètement la condition newValue >= 10.

0
fuzz