Angular响应式表单如何为input设置对象值并展示指定字段

出现[object Object]的原因是原生文本输入框的value属性仅支持字符串类型，直接给表单控件赋值对象时，Angular默认会调用对象的toString()方法转成字符串填充输入框，就会得到该结果。

方案1：模板侧直接处理（无需封装，适合少量使用场景） #

模板代码 #

<input 
  type="text"
  formControlName="destZona"
  [value]="editForm.get('destZona').value?.codice || ''"
  <!-- 如果是仅选择不能手动输入的场景，加readonly属性、去掉input事件绑定即可 -->
  (input)="handleZonaInput($event)"
>

组件逻辑代码 #

// 表单初始化和普通控件完全一致
this.editForm = this.fb.group({
  // 其他表单控件声明
  destZona: [null]
})

// 允许手动输入的场景需要加这个方法处理输入值
handleZonaInput(event: Event): void {
  const inputText = (event.target as HTMLInputElement).value;
  const zonaControl = this.editForm.get('destZona');
  // 保留原有id，仅更新codice字段
  zonaControl.setValue({
    ...zonaControl.value,
    codice: inputText
  }, { emitEvent: false });
}

赋值、取值逻辑和之前完全一致 #

// 服务端返回数据后直接赋值完整对象，输入框会自动显示codice字段
this.editForm.get('destZona').setValue({ id: 47, codice: "Milano" });

// 提交表单时取值仍然是完整对象
console.log(this.editForm.get('destZona').value); // 输出 {id: 47, codice: "Milano"}

方案2：封装通用自定义控件（适合多场景复用） #

如果项目多处需要这类「显示指定字段、存储完整对象」的输入控件，可以实现Angular的ControlValueAccessor接口封装成通用表单组件，后续使用时和普通输入框用法完全一致，不需要每次重复写绑定逻辑。

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