FormGroup读取equiid控件value时报错Cannot read property 'value' of undefined

产生原因 #

该报错的核心原因不是equiid控件的取值为空，而是你尝试读取value属性的主体对象本身不存在：this.formGroupContent.controls['equiid']的值为undefined，此时访问它的value属性就会触发该报错。常见触发场景如下：

• 这段校验逻辑的执行时机早于表单初始化完成的时机：比如表单组formGroupContent、equiid控件的初始化逻辑晚于校验代码执行，或者控件是异步加载生成、还没完成挂载就调用了校验逻辑
• 控件键名不匹配：声明表单控件时的键名和取值时写的'equiid'拼写不一致，比如大小写错误、多了特殊字符等
• equiid是动态条件加载的控件，当前触发校验的场景下，该控件还没有被添加到formGroupContent表单组中

解决方案 #

快速修复（兼容所有场景） #

优先使用Angular表单提供的get()方法获取控件，搭配可选链语法逐层判空，避免属性读取报错：

// TypeScript 3.7及以上版本可选链写法
if (this.formGroupContent?.get('equiid')?.value === undefined) {
  console.log("undefined value");
} else {
  console.log("has value");
}

如果需要兼容低版本TypeScript，可以手动逐层判空：

const equiidControl = this.formGroupContent ? this.formGroupContent.get('equiid') : null;
if (!equiidControl || equiidControl.value === undefined) {
  console.log("控件不存在或取值为undefined");
} else {
  console.log("has value");
}

如果你的业务场景需要判断值为空的情况（包含空字符串、null等空值），可以把判断条件简化为!this.formGroupContent?.get('equiid')?.value。

根因修复 #

可以同步排查以下问题从根源避免报错：

• 调整代码执行顺序，确保校验逻辑在表单组、equiid控件初始化完成后再执行
• 核对表单声明时equiid的键名拼写，和取值时的字符串保持完全一致
• 如果是动态控件，先判断当前场景下equiid是否已经被添加到表单组，再执行取值逻辑

内容的提问来源于stack exchange，提问作者M.Gh