Receiving the error notification from a 400 Bad Request

I'm having trouble showing the errors returned from an API on my Sign up form when a user submits invalid data.

You can check out the error response in the console here: console ss

This is my approach in RegisterComponent.ts:

onSubmit() {
    this.userService.register(this.registerForm.value).subscribe(response =>{
      this.router.navigateByUrl('/shop');
    }, error => {
      console.log(error);
      this.errorMessage = error.errors;
      if(this.errorMessage) for(let err of this.errorMessage) console.log(err);
    });
  }

I also added this to the html:

<ul *ngIf="errorMessage">
   <li *ngFor="let error of errorMessage">
      {{error}}
   </li>
</ul>

However, it doesn't seem to be working as expected. The errorMessage variable appears to be empty and I want it to show "An account already exists with this email". How can I correctly retrieve the error message?

Answer №1

Your understanding is correct, but your approach to storing it may not be optimal. Consider using the following line of code: this.errorMessage = error.error;

Remember, there is no 's' in error. Additionally, there is no need to loop through the error since it is already a string. If you attempt to loop through it, you will access each letter individually.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing a forwardRef component in TypeScript to handle child elements

Working with @types/react version 16.8.2 and TypeScript version 3.3.1. This forward refs example was taken directly from the React documentation with added type parameters: const FancyButton = React.forwardRef<HTMLButtonElement>((props, ref) => ...

Angular service designed for distributing a collection of data across nested levels

How can values be effectively shared across components within a specific hierarchy without having to pass them down individually, especially when some nodes require the values and others do not? It can become messy. I've been considering something li ...

"Encountered an error while trying to access the property 'fileChangeEvent' in Angular2 - it is undefined

Encountering an error when attempting to select an image file. import {Injectable} from '@angular/core'; @Injectable() export class UploadPhotoService { filesToUpload: Array<File>; constructor() { this.filesToUpload = []; ...

Convert an HTML file to .msg format or prevent the send button from functioning in Outlook messages

I am trying to figure out how to save an HTML file as a .msg format in order to send it later. The HTML is basically a mock of a regular email with just the basic features like from, to, cc, subject, and body. I'm not quite sure how to go about achiev ...

I'm facing an issue with SSRProvider in my NextJs application

My application is developed using NextJs and Typescript, utilizing the react-bootstrap library for creating components. I am facing an issue where I keep receiving an error message stating that When server rendering, you must wrap your application in an &l ...

Enhancing the TypeScript typings of modules in Angular 2

In my Angular2 application, I am facing an issue with an external NPM package that has an outdated typings file. This means there are functions within the package that are present but not declared in the typings file. My main goals are: To create and ut ...

Cypress - Ensuring selective environment variables are committed to source control

I currently have two different .env files, one named development.json and the other called production.json. These files contain various environment variables structured like this: { "env": { "baseUrl": "test.com", ...

Unsubscribing from a nested observable - a step-by-step

In our Angular component, we leverage the ngOnDestroy() method to handle canceling http requests that are still pending when navigating away from a page. To avoid reloading data that has already been fetched, we utilize a custom generic cache helper on cer ...

When implementing asynchronous form control validation in Angular 2, several API requests are triggered

Can anyone help me with adding async validation using a FormControl? For every keypress, I am receiving multiple responses and it seems like an extra request is triggered whenever I type or remove a character in the form control. code-snippets.component.t ...

Issue: Failed to Render: Error encountered during parsing of template: Element 'mat-checkbox' is not recognized as a valid element

For the purpose of testing my component, I wrote the following code snippet: describe('Component: TestComponent', () => { let component: TestComponent; let fixture: ComponentFixture<TestComponent>; beforeEac ...

Having trouble with Apple Login functionality in Safari on my Angular application

While implementing apple login in my web app, I encountered an issue with Safari browser. Instead of opening the redirect URI in a new tab, it displays a finger touch enabled login popup. This prevents the passing of the redirect URI and causes problems wi ...

What is the best way to transfer data to the server in a loop without encountering synchronization issues?

I am working with an array of products in typescript (in angular) and my goal is to update their prices in the database using http calls. The way I currently insert them is as follows: array.foreach(element=>{ this.product.price=element; this.myS ...

I am experiencing issues with certain Tailwind CSS classes not functioning properly in my Angular 16 project

I have embarked on an exciting journey of developing an Angular 16 project integrated with the latest version of Tailwind CSS, V3. Following the official documentation, I expected everything to work seamlessly. However, I am perplexed as to why some classe ...

Guide for Showing Data from Json Mapper in Angular 5

As a newcomer to Angular5 with TypeScript, I am trying to figure out how to display data from my JSON. I have an API that was created using Java. I have created a JSON Mapper in my Angular code like this : The JSON generated from my Java application looks ...

Learn the art of bypassing TypeScript errors using @ts-ignore!

I recently encountered an issue when trying to import a pure JavaScript library into a TypeScript project, resulting in the error message: Could not find a declaration file for module xxx. After some research, I learned that this error can be suppressed u ...

Encountering an issue with importing mongoose models while trying to create a library

I've been working on creating a library of MongoDB models and helper classes to be shared as an npm module with the rest of my team. However, I'm facing an issue with the main code that I import from lib MongoConnector which processes configurati ...

Can someone provide guidance on effectively implementing this JavaScript (TypeScript) Tree Recursion function?

I'm currently grappling with coding a recursive function, specifically one that involves "Tree Recursion". I could really use some guidance to steer me in the right direction. To better explain my dilemma, let's consider a basic example showcasi ...

Understanding Mongodb: the process of populating a schema that is referenced within another schema using an API

Looking to make adjustments to my Api in order to populate a referenced schema. Here's the schema I am working with: export const taskSchema = new Schema ({ user:{ type: String, required: true }, project: { type ...

Incorporate a background image into mat-dialog

I've been struggling to set a background image on my mat-dialog, but for some reason it's not showing up at all. I attempted using a panelClass as well, but still no luck. .custom-panel .mat-dialog-container { background-image: url("../. ...

Making an HTTP request from Angular 6 to a Node.js server

While attempting to send an HTTP request from Angular to a Node.js server, I encountered the following error on the Angular side: "Access to XMLHttpRequest at 'http://localhost:5030/employees/save' from origin 'http://localhost:4200' h ...