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

【问题标题】：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”。

<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>

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() {
  }

}

【问题讨论】：

标签： html angular laravel jwt

【解决方案1】：

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

【讨论】：

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

【解决方案2】：

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

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

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

【讨论】：