Angular：如何将API返回的邮箱值设置到FormControl？

我通过REST API获取用户数据，返回格式如下：

{
 "users": [
  {
    "id": 1,
    "firstname": "John",
    "email": "test@aol.com",
    "lastname": "Smith"
  }
 ]
}

想要把返回的邮箱值默认填充到表单的emailId控件中，表单定义如下：

templateForm = this.fb.group({
  appCode: [""],
  accountType: [""],
  emailId: [""],
  IDV: [""],
  emailSubject: [null, Validators.required],
  emailBlurb: [null, Validators.required],
  envelopeRequest: this.fb.group({
   compositeTemplates: this.fb.array([this.newCompositeTemplate()]),
  }),
});

我在ngOnInit里调用服务并尝试用patchValue赋值，但表单控件始终没内容：

ngOnInit() {
 this.userservice.getUsers().subscribe((res: User) => {
  this.userData = res;
 }); 
 this.templateForm.patchValue({
  emailId: this.userData.email    
 });
}

但如果在patchValue里硬写邮箱地址就能正常显示，求问题原因和解决办法。

问题原因 #

1. 异步时序错误：API请求是异步操作，patchValue代码在订阅回调执行前就已经运行了，此时this.userData还没被赋值，相当于给emailId设了undefined，控件自然没内容。
2. 数据路径错误：API返回的是包含users数组的对象，代码里直接取this.userData.email，但this.userData是整个响应对象，正确的邮箱路径应该是this.userData.users[0].email。

解决方法 #

方法一：修正时序与数据路径 #

把patchValue移到订阅回调内部，确保拿到数据后再赋值，同时修正取邮箱的路径：

ngOnInit() {
 this.userservice.getUsers().subscribe((res: User) => {
  this.userData = res;
  // 从users数组的第一个元素中获取邮箱
  this.templateForm.patchValue({
    emailId: this.userData.users[0].email    
  });
 }); 
}

方法二：添加空值判断（更健壮） #

如果API返回的users数组可能为空，可以加一层判断避免报错：

ngOnInit() {
 this.userservice.getUsers().subscribe((res: User) => {
  this.userData = res;
  // 确保users数组存在且有数据再赋值
  if (this.userData?.users?.length > 0) {
    this.templateForm.patchValue({
      emailId: this.userData.users[0].email    
    });
  }
 }); 
}

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