Angular5响应式表单报错：无法为undefined对象赋值

首先咱们先定位核心问题：你遇到的Cannot set property 'name' of undefined（你描述里的email应该是笔误），本质原因是你只声明了sub: Subscription;这个变量的类型，但从来没有给它创建过实例对象，它的初始值是undefined，自然没法给它的属性赋值。

另外还有个小细节要先修正：你的模板里绑定的表单变量是subscribeForm，但组件里定义的是subForm，这会导致表单无法正确绑定，先把这个同步过来：

<!-- 修改模板里的formGroup绑定 -->
<form class="form align-end" [formGroup]="subForm" (ngSubmit)="subscribe()">
  <h2 class="label label--blue">S'inscrire</h2>
  <div class="form-group"><input type="text" id="name" name="name" formControlName="name" placeholder="Hubert" required /></div>
</form>

接下来解决sub未初始化的问题，有几种实用的实现方式：

方式一：组件初始化时创建空对象实例 #

在组件里直接给sub初始化一个符合Subscription接口的空对象，这样后续就能直接赋值：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
// 注意导入和变量类型保持统一，这里统一用Subscription
import { Subscription } from '@models/sub.model';

@Component({
  selector: 'md-subscribe',
  templateUrl: './subscribe.component.html',
  styleUrls: ['./subscribe.component.scss']
})
export class SubComponent {
  subForm: FormGroup;
  // 初始化空对象，匹配Subscription接口结构
  sub: Subscription = { name: '' };

  constructor(private builder: FormBuilder) {
    this.subForm = this.builder.group({
      name : ['', Validators.required]
    });
  }

  subscribe() {
    // 现在可以正常赋值了
    this.sub.name = 'test value';
    // 也可以直接把表单值整体赋值给sub
    // this.sub = { ...this.subForm.value };
  }
}

方式二：赋值前临时创建实例 #

如果不需要提前初始化sub，可以在subscribe方法里先创建实例再赋值：

subscribe() {
  // 用类型断言告诉TS这个空对象符合Subscription接口
  this.sub = {} as Subscription;
  this.sub.name = 'test value';
  // 或者直接用表单值赋值
  // this.sub = this.subForm.value as Subscription;
}

方式三：直接将表单值赋值给sub #

因为subForm.value的结构和Subscription接口完全匹配，你可以一步到位把表单值赋值给sub：

subscribe() {
  // 直接赋值，类型会自动匹配
  this.sub = this.subForm.value;
  // 要是需要修改属性，后续再单独调整即可
  // this.sub.name = 'modified test value';
}

总结一下，核心就是必须确保sub是一个已初始化的对象，而不是undefined——TypeScript的类型声明只是做静态检查，不会自动帮你创建对象实例哦。

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