如何在Angular中单独访问Form表单内单个控件的属性值

问题原因 #

你用到的ModelForm是Angular响应式表单的FormGroup类型实例，value是FormGroup内置的属性，会返回所有表单控件组成的键值对对象，所以直接打印ModelForm.value可以正常输出。但FormGroup并不会把单个表单控件直接作为自身的属性挂载，你直接访问ModelForm.firstName访问的是FormGroup实例上不存在的属性，自然会抛出错误。

解决方案 #

你可以通过以下两种常用方式访问单个表单控件的值：

• 直接从value属性中读取对应字段：

  {{ ModelForm.value.firstName | json }}
  

• 调用FormGroup的get()方法获取对应控件实例，再读取其值，建议搭配可选链避免表单初始化阶段控件未挂载时报错：

  {{ ModelForm.get('firstName')?.value | json }}
  

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