Open Closed

Angular show `Error detail not sent by server.` when the server return code 400 with validation errors. #5171


User avatar
0
LinchArnold created

Hi, ABP teams:

  1. I use the newest v7.2.2 suite to generate Angular UI/ Tiered Project with Lepton Theme.
  2. Create new Foobar entity with Required Name property.
  3. For angular side, I removed the Validators.Required validator of name in the buildForm function.
  4. Start the projects and angular, add new foobar with the Name input blank. Click the save button I got the below errors: Error detail not sent by server.

the server return the validation errors as follow:

The expected error message should something like The Name field is required.

If you're creating a bug/problem report, please include followings:

  • ABP Framework version: v7.2.2
  • UI type: Angular
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): yes
Markdown supported.
Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

2 Answer(s)
  • User Avatar
    0
    masum.ulu created
    Angular Expert

    Hello Linch,

    I've refunded your credit, We solved this problem with 7.3.0-rc.1 version, PR. When you update project It'll fixed. For workaround you can use custom error handler for 400 response after the update project you can remove safely

    Example

    //error.handler.ts
    
    import { Injector } from '@angular/core';
    import { HttpErrorResponse } from '@angular/common/http';
    import { Observable, throwError } from 'rxjs';
    import { LocalizationParam } from '@abp/ng.core';
    import { Confirmation, ConfirmationService } from '@abp/ng.theme.shared';
    
    export function handleHttpErrors(injector: Injector, httpError: HttpErrorResponse) {
      if (httpError?.status === 400) {
        return showError(
          injector,
          httpError.error.error.validationErrors[0].message,
          httpError.error.error.message,
        );
      }
    
      return throwError(() => httpError);
    }
    
    function showError(
      injector: Injector,
      message: LocalizationParam,
      title: LocalizationParam,
    ): Observable<Confirmation.Status> {
      const confirmationService = injector.get(ConfirmationService);
      return confirmationService.error(message, title, {
        hideCancelBtn: true,
        yesText: 'AbpAccount::Close',
      });
    }
    
    //app.module.ts
    
    import {HTTP_ERROR_HANDLER} from '@abp/ng.theme.shared';
    import {handleHttpErrors} from './err.handler';
    
    @NgModule({
      declarations: [
       //declarations
      ],
      imports: [
       //Imports
      ],
      providers: [
       //Other providers,
        { provide: HTTP_ERROR_HANDLER, useValue: handleHttpErrors },
      ],
      bootstrap: [AppComponent],
    })
    export class AppModule {}
    

    Output

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    LinchArnold created

    Thanks. @masum.ulu

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.8.0-preview. Updated on September 28, 2026, 11:44
1
ABP Assistant
🔐 You need to be logged in to use the chatbot. Please log in first.