Question

我正在开发使用Laravel作为后端和Angular作为前端的应用程序。要登录并注册，我尝试使用JWT，但是当我尝试使用注册表单进行注册时，出现以下错误：“ ERROR TypeError：无法读取未定义的属性'name'”。

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

}

Answer 1

在模板中，测试[hidden]='!error.name'无效，因为未在控制器（.ts）中定义变量错误。

Answer 2

您应该在组件中使用类型对象定义错误属性。因为 Angular 需要带名称键的名为error的对象。

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

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

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

2 个答案: