I am encountering an issue with setting up server error validation for each input field in a form. The challenge lies in the fact that I am using ngrx@store, which presents a complication.
@Effect({ dispatch: false })
error$ = this.actions$.pipe(
ofType(actions.UserActionTypes.Error),
map(
(error: actions.Error) => {
new actions.Error(error);
}
//this.notificationService.warn(error.error.message)
)
);
This code enables me to store errors within the store.
Now, my aim is to retrieve these errors within my component. Subsequently, I intend to identify the input field associated with the error and display the error message next to said field.
this.errorsMsgs$ = this.store.select(fromStore.UserSelectors.getErrors);
this.errorsMsgs$.pipe(takeUntil(this.destroy$)).subscribe((error: any) => {
console.log(error);
for (let err of error) {
if (err.field === "username") {
this.usernameError = err.defaultMessage;
}
if (err.field === "lastName") {
this.lastNameError = err.defaultMessage;
}
if (err.field === "firstName") {
this.firstNameError = err.defaultMessage;
}
if (err.field === "email") {
this.emailError = err.defaultMessage;
}
if (err.field === "phone") {
this.phoneError = err.defaultMessage;
}
if (err.field === "enabled") {
this.enabledError = err.defaultMessage;
}
}
});
The difficulty arises when attempting to implement this code within ngOnInit. This leads to an error in the console due to the unavailability of errors at that stage.
ERROR TypeError: error is not iterable
The CRUD function operates within ngrx@effect, encompassing success and error scenarios. How can I determine in the component when the submit method encounters an error response? Is it possible to trigger this method from the effects?
Here is an example of an error response:
{
"timestamp": "2020-01-14T11:37:51.533+0000",
"status": 400,
"error": "Bad Request",
"errors": [{...}
],
"message": "Validation failed for object='user'. Error count: 6",
"path": "/user/add/"
}