Angular模板驱动表单取值报错：Cannot read property 'description' of undefined

这个错误是Angular开发里很常见的小问题，根源在于你组件里的task变量只做了类型声明，但没有初始化实例，导致模板里的[(ngModel)]绑定找不到对应的属性。

具体修复步骤： #

• 在组件中初始化Task对象，你可以选择在变量声明时直接赋值，或者在ngOnInit/构造函数里初始化：

修改后的组件代码：

export class CreateTaskComponent implements OnInit { 
 // 初始化task对象，如果Task是接口用{} as Task，如果是类就用new Task()
 task: Task = {} as Task; 
 
 constructor( 
  private router: Router, 
  private taskService: TaskService) { } 
 
 ngOnInit() { 
  // 也可以在这里初始化：this.task = {} as Task;
 } 
 
 saveTask(valuesFromForm) { 
  console.log(valuesFromForm); 
  this.taskService.save(valuesFromForm); 
  this.router.navigate(['/tasks']); 
 } 
 
 cancel() { 
  this.router.navigate(['/tasks']); 
 } 
}

错误原因解释： #

你的模板里写了[(ngModel)]="task.description"，Angular在渲染模板时会尝试访问task的description属性，但组件初始化时task是undefined，自然就会抛出"Cannot read property 'description' of undefined"的错误。只要给task初始化一个空对象（或符合Task类型的实例），模板就能正常找到对应的属性进行双向绑定了。

修改完成后，你提交表单时就能正常获取到valuesFromForm的内容，模板也不会再出现报错啦。

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