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

2 Answer(s)
  • User Avatar
    0
    masum.ulu created
    Support Team 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

  • User Avatar
    0
    LinchArnold created

    Thanks. @masum.ulu

Made with ❤️ on ABP v9.1.0-preview. Updated on December 05, 2024, 12:19