Форма Angular Update заполняет поля ввода, но все равно возвращает ошибку в консоли?

Question

Я пытаюсь создать форму обновления в Angular. Я пробовал много вещей, но опять же я не очень знаком с Angular для начала. Это кажется довольно простым, хотя, я получаю данные, используя метод ngOnInit() (который возвращает правильные данные). Пользовательские данные отображаются в полях ввода, но затем появляется ошибка.

Это ошибка, которую я получаю в консоли:

UpdateComponent.html:6 ERROR TypeError: Cannot read property 'firstName' of undefined
    at Object.eval [as updateDirectives] (UpdateComponent.html:6)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:11914)
    at checkAndUpdateView (core.js:11307)
    at callViewAction (core.js:11548)
    at execComponentViewsAction (core.js:11490)
    at checkAndUpdateView (core.js:11313)
    at callViewAction (core.js:11548)
    at execEmbeddedViewsAction (core.js:11511)
    at checkAndUpdateView (core.js:11308)
    at callViewAction (core.js:11548)

Мой update.component.html файл:

<div>
<h2 class="page-header">Edit your Profile</h2>
<form (ngSubmit)="onUpdateSubmit(user)" novalidate>
  <div class="form-group">
    <label for="firstName">First Name</label>
    <input type="text" [(ngModel)]="user.firstName" name="firstName" class="form-control" id="firstName" placeholder="First Name">
  </div>
  <div class="form-group">
    <label for="lastName">Last Name</label>
    <input type="text" [(ngModel)]="user.lastName" name="lastName" class="form-control" id="lastName" placeholder="Last Name">
  </div>
  <div class="form-group">
    <label for="age">Age</label>
    <input type="number" [(ngModel)]="user.age" name="age" class="form-control" id="age" placeholder="Age" min="0" max="200">
  </div>
  <div class="form-group">
    <label for="favoriteFood">What is your Favorite Food?</label>
    <input type="text" [(ngModel)]="user.favoriteFood" name="favoriteFood" class="form-control" id="favoriteFood" placeholder="Favorite Food">
  </div>
  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" [(ngModel)]="user.username" name="username" class="form-control" id="username" placeholder="Username">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" [(ngModel)]="user.email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" [(ngModel)]="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
</div><div>
<h2 class="page-header">Edit your Profile</h2>
<form (ngSubmit)="onUpdateSubmit(user)" novalidate>
  <div class="form-group">
    <label for="firstName">First Name</label>
    <input type="text" [(ngModel)]="user.firstName" name="firstName" class="form-control" id="firstName" placeholder="First Name">
  </div>
  <div class="form-group">
    <label for="lastName">Last Name</label>
    <input type="text" [(ngModel)]="user.lastName" name="lastName" class="form-control" id="lastName" placeholder="Last Name">
  </div>
  <div class="form-group">
    <label for="age">Age</label>
    <input type="number" [(ngModel)]="user.age" name="age" class="form-control" id="age" placeholder="Age" min="0" max="200">
  </div>
  <div class="form-group">
    <label for="favoriteFood">What is your Favorite Food?</label>
    <input type="text" [(ngModel)]="user.favoriteFood" name="favoriteFood" class="form-control" id="favoriteFood" placeholder="Favorite Food">
  </div>
  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" [(ngModel)]="user.username" name="username" class="form-control" id="username" placeholder="Username">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" [(ngModel)]="user.email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" [(ngModel)]="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>

Мой update.component.ts файл:

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { ValidateService } from '../../services/validate.service';
import { Router } from "@angular/router";
import { FlashMessagesService } from 'angular2-flash-messages';

@Component({
  selector: 'app-update',
  templateUrl: './update.component.html',
  styleUrls: ['./update.component.css']
})
export class UpdateComponent implements OnInit {
  user: Object;

  constructor(
    private authService: AuthService,
    private validateService: ValidateService,
    private router: Router,
    private _flashMessagesService: FlashMessagesService
  ) { }

  ngOnInit() {
    this.authService.getProfile().subscribe(profile => {
      this.user = profile.user;
    },
    err => {
      console.log(err);
      return false;
    });
  }

  onUpdateSubmit(user) {
    console.log("Component", user)
    // Required Fields
    if(!this.validateService.validateSignup(user)) {
      this._flashMessagesService.show("Please fill in all fields", {cssClass: "alert-danger", timeout: 3000});
      return false;
    }

    // Validate Email
    if(!this.validateService.validateEmail(user.email)) {
      this._flashMessagesService.show("Please use valid email", {cssClass: "alert-danger", timeout: 3000});
      return false;
    }

    // Update user
    this.authService.updateUser(user).subscribe(data => {
      if(data.success) {
        this._flashMessagesService.show("Update Success!", {cssClass: "alert-success", timeout: 3000});
        this.router.navigate(["/profile"]);
      } else {
        this._flashMessagesService.show("Something went wrong", {cssClass: "alert-danger", timeout: 3000});
        this.router.navigate(["/update"]);
      }
    });
  }

}

Answer 1

Это потому, что в пользовательских данных не определено firstName.Это связано с тем, что во время загрузки вашей страницы ваш user объект не инициализируется.Если в ngOnInit нет объекта, назначенного на this.user, будет возвращено исключение.Вы можете исправить это двумя способами.Одним из методов является инициализация объекта this.user в начале.Он вернет пустую форму, если объект пользователя не назначен в ngOnInit, но не вернет исключение.Это можно сделать, просто инициализировав объект user при определении объекта или в конструкторе.

при определении объекта

user={}

или в конструкторе

this.user={}

Второй способ заключается в том, что если вы хотите отобразить форму только при наличии данных, вы можете использовать *ngIf для отображения формы только при наличии данных в объекте user.

<div *ngIf="user">
<h2 class="page-header">Edit your Profile</h2>
<form (ngSubmit)="onUpdateSubmit(user)" novalidate>
........
.........
</form
</div>

Answer 2

В вашей форме есть двусторонняя привязка, тогда почему вам нужно передать пользователя при отправке формы. Попробуйте использовать как показано ниже

   <form (ngSubmit)="onUpdateSubmit()" novalidate>
    .
    .
    .

и используйте

  onUpdateSubmit() {
    console.log("Component", this.user);
    .
    .
    .
 }

Answer 3

Ваше сообщение об ошибке ясно.Ваш пользователь заполняется вызовом API на ngOnInit, который, однако, может вернуть ответ после загрузки HTML.Во время загрузки ваш DOM ожидает, что пользователь будет доступен, но в вашем случае он не определен.Есть несколько способов исправить это.Во-первых, следуйте обычному стандарту, определите своего пользователя, как показано ниже в вашем конструкторе.

constructor(
    private authService: AuthService,
    private validateService: ValidateService,
    private router: Router,
    private _flashMessagesService: FlashMessagesService
  ) { 

   this.user = <Object>{};
}

Теперь ваш пользователь не является неопределенным, и даже если user.name, это может быть кратко, и ошибка не будет выдана,Второй вариант - обновить update.component.html, загружать DOM только тогда, когда пользователь доступен или не определен.Чтобы сделать это, добавьте * ngIf в ваш первый div

<div *ngIf="user">
<h2 class="page-header">Edit your Profile</h2>
<form (ngSubmit)="onUpdateSubmit(user)" novalidate>
........
.........
</form
</div>

Форма выше, ваша форма не будет загружена, когда пользователь не определен, следовательно, отпадает необходимость в user.name.

Answer 4

Это потому, что в пользовательских данных не возвращается firstName.Может быть, это не определено.Чтобы избежать проблемы.

Вы бы лучше: 1. Проверьте пользовательские данные в ngOnInit(), если они возвращаются.2. Исходные данные пользователя.e, g: user = { firstName: '' }; 3. Проверьте, есть ли задержка при получении пользовательских данных из сервиса