Angular响应式表单仅获取用户输入值，无法获取禁用自动填充控件值

• Angular 响应式表单的value属性默认仅返回启用状态的表单控件值，你把街道、城市等控件设置为disabled状态，默认就不会被包含在this.addBranchDetailsForm.value的返回结果里，这是Angular的内置设计。
• 你当前的赋值逻辑仅更新了组件类的streetName、suburb等独立变量，同时手动绑定到了input的原生value属性，但是没有更新响应式表单对应的FormControl实例的值。响应式表单的数据源是FormGroup/FormControl实例，不是DOM的value属性，所以表单实例里的这些禁用控件值仍然是空的。

第一步：修改地址赋值逻辑，直接更新表单控件值 #

在handleAddressChange回调的末尾，所有地址字段解析完成后，批量更新表单控件的值：

// 原有解析地址的逻辑不变，最后新增以下代码
this.addBranchAddressForm.patchValue({
  branchStreetName: this.streetName,
  branchSuburb: this.suburb,
  branchCity: this.city,
  branchProvince: this.province,
  branchCountry: this.country,
  branchZip: this.zip
})

同时可以删掉HTML模板里所有禁用input上的value={{xxx}}绑定，formControlName会自动同步FormControl的值到输入框，不需要手动绑定原生value避免出现数据不一致的问题。

第二步：使用getRawValue()方法获取全量表单值 #

把原来的取值代码：

const branch: Branch = this.addBranchDetailsForm.value;

替换为：

const branch: Branch = this.addBranchDetailsForm.getRawValue();

getRawValue()是FormGroup的内置方法，会返回所有控件（包括禁用状态）的当前值，刚好符合你的需求。

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