Saltar al contenido

RangeError: se excedió el tamaño máximo de la pila de llamadas al usar valueChanges.subscribe

Nuestros programadores estrellas han agotado sus provisiones de café, por su búsqueda noche y día por la resolución, hasta que Román halló la solución en Gitea por lo tanto ahora la compartimos con nosotros.

Solución:

Si desea suscribirse a cualquier cambio de formulario y aún ejecutar patchValue dentro de él, puede agregar el emitEvent: false opción a patchValue, por lo que la aplicación de parches no activará otra detección de cambio

código:

this.formGroup
    .valueChanges
    .subscribe( _ => 
        this.formGroup.get( 'controlName' ).patchValue( _val, emitEvent: false );
     );

PD. Esto también es menos tedioso que suscribirse a cada control de formulario uno por uno para evitar activar el cambio de pila máxima de llamadas excedida. Especialmente si su formulario tiene 100 controles para suscribirse.

Ahora, para profundizar más, si aún necesita actualizarValueAndValidity dentro de la suscripción, le sugiero que use el distinctUntilChanged Operador rxjs, para ejecutar solo la suscripción, cuando cambia algún valor.

La documentación distintiva de UntilChanged se puede encontrar aquí.

https://www.learnrxjs.io/operators/filtering/distinctuntilchanged.html

distinto hasta que se cambie - Solo se emite cuando el valor actual es diferente al anterior.

Ahora también tendremos que convertirlo en una función de validación personalizada, ya que, de forma predeterminada, distintoUntilChanged valida los objetos por puntero y el puntero es nuevo en cada cambio.

this.formGroup
    .valueChanges
    .distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b))
    .subscribe( _ => 
        this.formGroup.get( 'controlName' ).patchValue( _val, emitEvent: false );
        this.formGroup.get( 'controlName' ).updateValueAndValidity();
     );

Y listo, estamos parcheando y actualizando, ¡sin llegar a la pila máxima de llamadas!

Mi respuesta es solo el desarrollo de este.

Añadiendo distinctUntilChanged() en la tubería justo antes subscribe() evita el "Tamaño máximo de la pila de llamadas excedido" porque

distinto hasta que se cambie El método solo emite cuando el valor actual es diferente al último.

El uso:

this.userForm.get('password')
  .valueChanges.pipe(distinctUntilChanged())         
  .subscribe(val => )

Documentación

El problema es que modificas el valor del campo dentro del valueChanges controlador de eventos para ese mismo campo, lo que hace que el evento se active nuevamente:

this.userForm.get('loginTypeId').valueChanges.subscribe(
  (loginTypeId: string) => 
    ...
    this.userForm.get('loginTypeId').updateValueAndValidity(); <-- Triggers valueChanges!

Aquí tienes las reseñas y calificaciones

¡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.