webentwicklung-frage-antwort-db.com.de

Angular 7 FormControl on valueChanges erhält den alten Wert

Ich habe einen formControl-Parameter in @Input übergeben, der an die Eingabe des Zahlentyps gebunden ist, dessen maximaler Wert 10 ..__ sein sollte. Wenn der Benutzer eine größere Zahl eingibt, sollte er den Eingabewert nicht ändern.

Wie kann entweder die Weitergabe von Ereignissen verhindert oder ein alter Wert abgerufen und erneut festgelegt werden?

Ich habe viele andere Lösungen von stack und github ausprobiert, aber nichts löst mein Problem. 

 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

2
karoluS

Das valueChanges-Ereignis wird ausgelöst, nachdem der neue Wert auf den Wert FormControl aktualisiert wurde. Aus diesem Grund können Sie den alten Wert nicht abrufen.

Der beste Ansatz wäre die Verwendung eines Validators, wie von @JB Nizet erwähnt.

Wenn Sie mit Ihrer Lösung fortfahren möchten, können Sie Angulars ngDoCheck life Cycle Hook verwenden, um den alten Wert beizubehalten.

Modifizierter Code:

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

Setzen Sie ein [max]-Attribut für das Eingabesteuerelement auf 10:

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

Auf diese Weise können Sie die newValue >= 10-Bedingung vollständig entfernen.

0
fuzz