Saltar al contenido

Angular 7 FormControl en valueChanges obtener valor antiguo

Hacemos una revisión completa cada una de las secciones de nuestra página web con el objetivo de enseñarte siempre la información más veraz y actualizada.

Solución:

Después de un año más de experiencia creo que encontré una solución óptima. Para resolver este problema, la mejor manera probablemente sería usar pairwise operador rxjs

Gracias a eso, puede obtener el valor anterior de la transmisión.

El fragmento proporcionado no resuelve el problema original, ya que requeriría algunos pasos adicionales, pero resuelve la pregunta original en “¿Cómo obtener el valor anterior?”.

Aquí viene el código:

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

Código vivo: https://stackblitz.com/edit/angular-tfrstg

los valueChanges El evento se activa después de que el nuevo valor se actualice al valor de FormControl, por eso no puede obtener el valor anterior.

El mejor enfoque sería usar un validador como lo menciona @JB Nizet.

Si desea continuar con su solución, puede aprovechar Angular ngDoCheck Gancho de ciclo de vida para conservar el valor anterior.

Código modificado:

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
  

ApilarBlitz

Sección de Reseñas y Valoraciones

Eres capaz de amparar nuestro trabajo escribiendo un comentario y valorándolo te lo agradecemos.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *