Angular路由切换时调用setValue出现Cannot read properties of undefined报错

报错原因 #

在ngOnInit执行时，组件视图还未完全渲染完成，@ViewChild('memberForm')获取到的表单实例memberForm仍为undefined，此时调用setValue就会触发该报错。路由切换场景下，组件视图初始化时机与ngOnInit执行顺序冲突，更容易出现这个问题。

解决方案 #

方案1：改用ngAfterViewInit生命周期钩子 #

ngAfterViewInit会在组件视图及其子视图初始化完成后执行，此时@ViewChild能稳定获取到表单实例：

import {Component, OnDestroy, OnInit, ViewChild, AfterViewInit} from '@angular/core';
import {FormsModule, NgForm} from "@angular/forms";
import {MemberService} from "../shared/member.service";
import {MemberModel} from "../shared/member.model";
import {NgForOf} from "@angular/common";
import {ActivatedRoute, ParamMap} from "@angular/router";
import {Subscription} from "rxjs";

@Component({
  selector: 'app-edit',
  standalone: true,
  imports: [FormsModule, NgForOf],
  templateUrl: './edit.component.html',
  styleUrl: './edit.component.css'
})
export class EditComponent implements OnInit , OnDestroy, AfterViewInit {
  @ViewChild('memberForm') memberForm!: NgForm;
  newMember!: MemberModel;
  editedMember!: MemberModel;
  private paramSubscription?: Subscription;

  constructor(private svc:MemberService, private route: ActivatedRoute,) {}

  ngOnInit() {
    // 订阅路由参数变化，支持同组件切换不同成员ID的场景
    this.paramSubscription = this.route.paramMap.subscribe((paramMap: ParamMap) => {
      const id = +paramMap.get('id')!;
      this.editedMember = this.svc.getMember(id);
      console.log(this.editedMember);
      // 触发视图初始化后的表单赋值
      this.updateFormValues();
    });
  }

  ngAfterViewInit() {
    // 初始化时同步表单数据
    this.updateFormValues();
  }

  private updateFormValues() {
    // 双重空值判断，避免数据或表单未就绪的报错
    if (this.editedMember && this.memberForm) {
      this.memberForm.setValue({
        name: this.editedMember.name,
        surname: this.editedMember.surname,
        nickname: this.editedMember.nickname,
        bio: this.editedMember.bio,
      });
    }
  }

  ngOnDestroy() {
    this.paramSubscription?.unsubscribe();
  }
}

方案2：给@ViewChild设置static: true #

如果表单是静态渲染（未使用*ngIf等条件渲染指令），可以给@ViewChild添加static: true配置，让Angular在ngOnInit之前就获取到表单实例：

@ViewChild('memberForm', { static: true }) memberForm!: NgForm;

修改后ngOnInit中的setValue调用可正常执行，但该方式不适合表单动态渲染的场景。

额外注意事项 #

• 必须添加空值判断：确保editedMember和memberForm都不为undefined时再调用setValue，避免因数据缺失导致的其他报错。
• 订阅路由参数变化：若用户在同一编辑组件中切换不同成员ID，ngOnInit仅执行一次，需通过订阅route.paramMap响应参数变化，实时更新表单数据。

内容的提问来源于stack exchange，提问作者sahar manouchehri