I have a dotnet 8 web api with an angular 17 client

I make a http post by using the following code

updateRegNumRange(range: object): Observable<any>
{
    const regnumRangeUrl = environment.baseUrl + `api/regnumrange`;
    return this.http.post(regnumRangeUrl, range, { responseType: "json" });
}

onSubmit(): void
{
    const range = {
        type: this.form.controls.type.value,
        start: this.form.controls.start.value,
        end: this.form.controls.end.value,
        updateMode: this.updateMode
    };
    this.updateRegNumRange(range).subscribe({
        next: () =>
        {
            // handle success
        },
        error: error =>
        {
            this.data.errorCodes = error.errorCodes;
        }
    });
}

Backend is answering with this:

[HttpPost]
public virtual ActionResult<RegNumRange> Update([FromBody] RegNumRange range)
{
    // manipulate range object and realize there's an error
    range.ErrorCodes.Add("wrong date");
    return BadRequest(range);
}

The issue is that my web api is correctly responding with 400 response and with the object as response content. But the error object in angular contains the following info:

Do you have any idea how i can retrieve the object returned by the web api?