Question

我收到TypeError：加载我的反应式表单时，无法读取属性“ firstName”。表单行为似乎是正确的。我的数据以表格的形式填充，但仍然出现此错误。

我查看了有关此问题的先前问题，答案似乎不适用于我的特殊情况。我是新手，请多多包涵。

这是我的UserComponent：

export class UserComponent implements OnInit, OnDestroy {
  user: User;
  userId: string;
  userChangedSub = new Subscription();
  form: FormGroup;

  constructor(private userService: UserService) {

  }

  ngOnInit() {
    console.log('ngOnInit started');
    this.userId = this.userService.getUserId();
    this.userChangedSub = this.userService.getUser(this.userId).subscribe(user => {
      console.log('email is: ' + user.email);
      this.user = user;
      console.log(this.user);
    });
    this.form = this.createFormGroup();
  }

  createFormGroup() {
    return new FormGroup({
      first: new FormControl('', {validators: Validators.required}),
      last: new FormControl('', {validators: Validators.required})
    });
  }

  onSubmit() {
  }

  ngOnDestroy() {
    this.userChangedSub.unsubscribe();
  }
}

这是我的表格：

<section class="user-form">
  <form fxLayout="column" fxLayoutAlign="center center" [formGroup]="form" (ngSubmit)="onSubmit()">
    <mat-form-field>
      <input matInput type="text" *ngIf="user.firstName!==undefined" [value]="user.firstName" formControlName="first">
    </mat-form-field>
    <mat-form-field>
      <input matInput type="text" [value]="user.lastName" formControlName="last">
    </mat-form-field>
    <button type="submit" [disabled]="!form.valid"></button>
  </form>
</section>

该表单显示了已登录用户的正确的名字和姓氏，但仍然出现此错误。我检查了表单中的user.firstName是否未定义。我以为这样可以删除TypeError。

任何帮助将不胜感激。

非常感谢。

Answer 1

加载组件时，user是undefined，这就是您收到错误的原因。您可以通过几种方式解决此问题。将user: User;更新为类似user: User = {};的内容，或更新HTML以包括以下“空/未定义”检查：<input matInput type="text" *ngIf="user?.firstName!==undefined" [value]="user?.firstName" formControlName="first">

新的反应式用户。 TypeError：无法读取未定义的属性“ firstName”

1 个答案: