Question

0

206

Views

Agregue dinámicamente observables de validación usando rxjs

Estoy tratando de escribir un observable para la tarea de validación. Tengo 2 observables que quiero procesar en orden, frontEndValidate y backEndValidate . Si uno arroja un error, la canalización debería detenerse. Estos 2 observables se emitirán en tiempo de ejecución cuando haga clic en el botón de validate , llamando a next() dentro de validate() .

En la canalización, verifico si los observables emitidos son válidos, si es así, continúe, de lo contrario arrojará un error.

Esta canalización funciona bien si esos 2 observables emiten of({ valid: true}) . Pero si emite of({valid:false}) , mi validationAction$ estará muerta y el botón de validate no funcionará.

Tampoco puedo usar catchError para mantener viva la tubería, ya que la validación continuará sin importar el estado del observable.

En resumen, quiero que mi canalización se comporte así y siga viva.

Caso válido, válido => de ([verdadero, verdadero])
Caso válido, inválido => from([verdadero, falso])
Caso inválido => from([false])

Gracias.

Tubería

 private validationSubject = new Subject<Observable<any>>(); validationAction$ = this.validationSubject.asObservable().pipe( concatMap((item) => from(item) .pipe( map((result) => { console.log("result", result); if (!result.valid) throw new Error(); return result }), ) ), );

al hacer clic

 validate() { this.validationSubject.next(this.frontEndValidate()); this.validationSubject.next(this.backEndValidate()); }

2 observables

 /* Front-end validation */ /** */ frontEndValidate(): Observable < any > { // Validation goes here return of({ valid: true, name: 'frontend', msg: 'Passed' }).pipe( tap(() => { console.log('frontend validation...starts'); }), delay(3000), // mimic delay tap(() => { console.log('frontend validation...finished') }), ); } /* Back-end validation */ /** */ backEndValidate(): Observable < any > { // Validation goes here return of({ valid: true, name: 'backend', msg: 'Passed' }).pipe( tap(() => { console.log('backend validation...starts'); }), delay(3000), // mimic delay tap(() => { console.log('backend validation...finished') }), ); }

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-03T08:37:06.373Z

Qué tal algo como esto:

 validate() { const result$ = combineLatest([ this.frontEndValidate(), this.backEndValidate(), ]) .pipe( tap(([frontEndResult, backEndResult]) => { // Do whatever else here }) ); result$.subscribe(x => console.log('Result: ', JSON.stringify(x))); }

Entonces no necesitas el sujeto. Simplemente use combineLatest para combinar los dos resultados y asegúrese de que el código que sigue espere a que ambos se completen antes de continuar.

El resultado emite una matriz con los dos objetos definidos en sus métodos de validación. En su lugar, para emitir solo una matriz con los valores booleanos, intente esto:

 validate() { const result$ = combineLatest([ this.frontEndValidate(), this.backEndValidate(), ]).pipe( map(([frontEndResult, backEndResult]) => ([frontEndResult.valid, backEndResult.valid]) ) ); result$.subscribe((x) => console.log('Result: ', JSON.stringify(x))); }

Ejemplo de trabajo: https://stackblitz.com/edit/angular-rxjs-validation-deborahk

0

206