Saltar al contenido

FormControl.detectchanges: ¿por qué utilizar differentUntilChanged?

Solución:

distinctUntilChanged cuando se aplica a la valueChanges observable…

… ¡probablemente nunca va a funcionar!

Solo funciona como se esperaba en un valor individual (como dijiste). De modo que obtendrá un nuevo valor incluso si nada ha cambiado.

Para realizar un seguimiento de los cambios de todo el formulario, debe escribir un comparador personalizado, el más simple de los cuales utiliza JSON.stringify para generar un valor que se pueda comparar. los valueChanges observable emite un objeto y distinctUntilChanges no es lo suficientemente inteligente como para hacer algo más que una comparación de referencia (es un enlace al código fuente de RxJS) a menos que proporcione una función de comparación.

this.form.valueChanges.pipe(distinctUntilChanged((a, b) => JSON.stringify(a) === 
                                                           JSON.stringify(b)))

                      .subscribe(changes => { console.log('The form changed!'); });

distinctUntilChanged funciona bien para un valor individual con un tipo primitivo porque === es suficiente para detectar cambios.

¿Cómo resuelvo bucles infinitos?

Si estás intentando agregar distinctUntilChanges en su tubería (para todo el formulario) para evitar un bucle infinito cuando actualiza programáticamente el valor del formulario; probablemente desee esto en su lugar:

    this.form.patchValue(address || {}, { emitEvent: false });

Utilizando debounceTime(1000) significa que solo enviamos una solicitud cuando el usuario dejó de escribir durante 1 segundo, durante ese segundo, el usuario puede escribir 3 caracteres y luego borrarlos, por lo que el valor de entrada no cambió desde la última solicitud, pero está enviando la misma solicitud, para evitar eso puedes usar .distinctUntilChanged()

  this.myFormControl.valueChanges
      .debounceTime(1000)
      .distinctUntilChanged()
      .subscribe(newValue => {
        console.log('debounced: ', newValue)
      });
¡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 *