Angular报错TypeError: 无法读取undefined的'title'属性，求解决方案

这个错误的核心是你尝试访问的某个对象未初始化，处于undefined状态，导致无法读取它的title属性，针对常用的两种表单类型，给出具体解决方法：

一、模板驱动表单场景 #

如果你的表单用[(ngModel)]绑定数据：

1. 初始化表单绑定对象
   在组件类里提前声明并初始化要绑定的对象，确保所有表单字段都有初始值：

   // 组件类中
   article = { title: '', content: '' }; // 根据你的表单字段补充其他属性
   

2. 确认模板绑定正确
   模板里的表单控件要正确绑定到这个对象的属性，同时必须加name属性：

   <input type="text" [(ngModel)]="article.title" name="title" />
   

二、响应式表单场景 #

如果用FormGroup/FormControl构建表单：

1. 创建并初始化FormGroup
   先导入表单模块，然后在组件里初始化表单实例：

   import { FormGroup, FormControl } from '@angular/forms';
   
   // 组件类中
   articleForm = new FormGroup({
     title: new FormControl(''),
     content: new FormControl('') // 对应你的其他表单字段
   });
   

2. 正确访问表单值
   在save方法里通过表单实例的value属性获取数据，或者用get()方法单独取字段：

   save() {
     // 获取完整表单数据
     const formData = this.articleForm.value;
     console.log(formData.title); // 此时title不会是undefined
   
     // 或者单独获取title字段
     const title = this.articleForm.get('title')?.value;
     // 后续保存逻辑
   }
   

3. 模板绑定FormGroup
   模板里的表单要关联这个FormGroup，控件用formControlName绑定：

   <form [formGroup]="articleForm" (ngSubmit)="save()">
     <input type="text" formControlName="title" />
     <button type="submit">保存</button>
   </form>
   

通用检查点 #

• 确保表单绑定的对象/FormGroup在组件初始化时就已创建，不要等到用户操作后才赋值。
• 如果是从服务加载初始数据，在数据返回前给对象设置默认空值，或者用可选链?.临时规避报错（比如this.article?.title），但优先提前初始化对象。

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