错误类型错误：无法读取未定义角度的属性“名称”

Posted 2023-03-10

【中文标题】错误类型错误：无法读取未定义角度的属性“名称”

【英文标题】：ERROR TypeError: Cannot read property 'name' of undefined angular

【发布时间】：2019-11-16 11:49:39

【问题描述】：

我正在开发一个使用 Laravel 作为后端和 Angular 作为前端的应用程序。要登录和注册，我尝试使用 JWT，但是当我尝试使用注册表单进行注册时，出现以下错误：“ERROR TypeError: Cannot read property 'name' of undefined”。

register.component.html

<form #registerForm=ngForm (ngSubmit)="onSubmit()">
   <div class="form-group row mx-auto">
      <label for="inputName3" class="col-md-6 col-form-label">Name</label>
      <div class="col-md-12">
         <input type="text" name="name" class="form-control" 
          placeholder="Name" [(ngModel)]="form.name" required>
         <div class="alert alert-danger mt-2" [hidden]="!error.name">
            <i class="fa fa-times-circle"></i> error.name
         </div>
      </div>
   </div>
...
</form>

register.component.js

export class RegisterComponent implements OnInit 

   public form = 
       name: null,
       email: null,
       password: null,
       password_confirmation: null
   ;

  constructor(private http: HttpClient)  

  onSubmit()
    return this.http.post('http://localhost/api/auth/register', 
    this.form).subscribe(
      data => console.log(data),
      error => this.handleError(error)
    );
  

  ngOnInit() 
  

【参考方案1】：

在模板中，您的测试 [hidden]='!error.name' 无效，因为变量 error 未在控制器 (.ts) 中定义。

【讨论】：

我有这样定义的错误public error = [];

【参考方案2】：

您应该在组件中定义类型为 object 的 error 属性。 因为 Angular 需要一个名为 error 且名称为 key 的对象。

如果您等待来自后端的错误，或者您需要快速解决方案，只需在 HTML 中的错误字后加上 ?（问号），例如：[hidden]='!error?.name'。

这将使 Angular 在检查 name 属性之前检查错误变量。