如何从JSON响应中访问error.errors.email对象？

问题分析 #

从控制台截图可见，API返回的错误响应结构为 err -> error -> errors -> email，当前代码存在两个核心问题：

• 未初始化error变量，导致模板初始渲染时因error为undefined抛出错误
• 错误回调中未正确提取有效错误数据，且模板访问路径与实际响应结构不匹配

修复步骤 #

1. 初始化error变量 #

在组件类中声明并初始化error对象，避免初始渲染时的空值报错：

// 基础初始化，也可以根据API响应定义更精准的类型
error: { errors?: { email?: string } } = {};

2. 正确赋值错误响应数据 #

在subscribe的错误回调中，将API返回的业务错误主体（err.error）赋值给this.error——控制台里的err对象中，真正包含错误详情的是error属性：

submit(): void {  
    this.authService.register(this.form.getRawValue())
    .subscribe(() => {
      this.router.navigate(['/login']);
    },
    (err) => {
      this.error = err.error; // 提取正确的错误数据
      console.log(err);
    },
    () => {
      console.log('complete');
    });
}

3. 模板中使用安全导航操作符 #

为避免error或errors为null/undefined时的报错，在插值表达式中添加安全导航操作符（?.）：

<form [formGroup]="form" (submit)="submit()">
    <div>
      <input formControlName="email" type="email">
      <div>{{ error?.errors?.email }}</div>
    </div>
</form>

可选：添加错误存在判断 #

如果需要更严谨的渲染控制，可通过*ngIf先判断错误是否存在，再显示内容：

<div *ngIf="error?.errors?.email">{{ error.errors.email }}</div>

内容的提问来源于stack exchange，提问作者almiros