Je développe une application angulaire 8. Je souhaite afficher des erreurs de formulaire à l'aide de NGRX Store et de formulaires réactifs à l'aide d'un validateur asynchrone personnalisé.
login.component.ts strong> p> login-page.effettes.ts strong> p> @Injectable()
export class LoginEffects {
constructor(
private _actions$: Actions,
private _authService: AuthenticationSevice,
private _router: Router,
private _modalService: SuiModalService,
private _store: Store<IAppState>,
) {}
Login$ = createEffect(() => {
return this._actions$.pipe(
ofType(AuthActions.Login),
tap(() => this._store.dispatch(ShowPageLoader())),
switchMap((credentials: ILoginCredentials) =>
this._authService.login(credentials).pipe(
map((response: ILoginResponse) => AuthActions.LoginSuccess(response)),
catchError((response: HttpErrorResponse) => {
let validationErrors: ValidationErrors;
switch (response.status) {
case HttpStatusCode.BAD_REQUEST:
validationErrors = {
error: {
validationErrors: response.error,
generalError:
'Oops! We found some errors with your provided details.',
},
};
break;
case HttpStatusCode.NOT_FOUND:
validationErrors = {
error: {generalError: 'Email or password is incorrect.'},
};
break;
}
return of(AuthActions.LoginFailure(validationErrors));
}),
finalize(() => this._store.dispatch(HidePageLoader())),
),
),
);
});
LoginSuccess$ = createEffect(
() => {
return this._actions$.pipe(
ofType(AuthActions.LoginSuccess),
tap(() => {
this._modalService.open(
new ModalComponent<IModalContext>(undefined, {
title: 'Login successful',
imageSrc: 'assets/images/modal/login-successful.png',
}),
);
this._router.navigateByUrl('/home');
}),
);
},
{dispatch: false},
);
}
3 Réponses :
La carte Il y a deux façons d'obtenir la syntaxe droite. carte RXJS dans votre Test () La fonction ne renvoie pas ce que vous pensez, car foo est interprété comme une étiquette , pas comme une clé dans un objet littéral comme vous l'avez l'intention. Voir le Docs pour plus d'explications .
Désolé, je l'aurais peut-être manqué dans le code ici, mais j'avais déjà essayé cela. Cela ne fonctionne pas.
Ok alors veuillez modifier le code que vous avez affiché pour refléter cela.
au lieu de retourner Maintenant pour l'autre question - Le validateur ASYNC n'a jamais été appelé lorsque le formulaire a été soumis.
La validation est configurée sur le niveau de contrôle ( this._store.select () , essayez d'accrocher dans Actions Écoute de flux pour plusieurs événements d'achèvement d'actions authactions.loginfailure et auteurs.loginsuccess store.sélectionnez immédiatement et n'attend pas que les effets se déclenchent.
e-mail ), il ne sera donc pas déclenché implicitement. Idéalement, votre formulaire ne doit pas être autorisé à être soumis s'il y a des erreurs dans une validation de contrôle.
C'est une erreur très fondamentale que je dirais. Ce dont vous avez besoin pour tout d'abord, c'est de comprendre la différence entre tuyau () et abonner ().
Voici un lien qui sera utile: Différence entre les méthodes .Pipe () et .subscribe () sur un RXJS Observable P> Fondamentalement, le problème avec votre code est que vous pouvez utiliser l'opération sur Observable, ce qui signifie que vos opérations n'exécuteront qu'une seule fois et ne surveillera pas les modifications. P>
Vous devez vous abonner à l'action Sélectionner à l'aide du code ci-dessous: P>
this.error$ = this.store.select(selectLoadingErrors);
this.error$.subscribe(data=>{
//do your code here
});