ОШИБКА TypeError: Невозможно прочитать свойство 'name' с неопределенным углом

Question

Я разрабатываю приложение, используя Laravel в качестве бэкэнда и Angular в качестве внешнего интерфейса. Для входа в систему и регистрации я пытаюсь использовать JWT, но когда я пытаюсь зарегистрироваться с помощью формы регистрации, я получаю следующую ошибку: «ОШИБКА TypeError: Невозможно прочитать свойство '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() {
  }

}

Answer 1

Вы должны определить свойство error с типом object в компоненте. потому что Angular ожидает объект с именем error с именем key.

Если вы ждете ошибки от бэкэнда или вам нужно быстрое решение, просто введите ? (знак вопроса) после слова ошибки в HTML, например: [hidden]='!error?.name'.

Это заставит Angular проверить переменную ошибки перед проверкой имени свойства.

Answer 2

В шаблоне ваш тест [hidden]='!error.name' недопустим, поскольку переменная ошибка не определена в контроллере (.ts).