Angular中input绑定formControl为对象时如何显示对象指定属性

出现[object Object]的原因是原生input的value只支持字符串类型，直接传入对象时浏览器会自动调用对象的toString()方法转换，就会得到该默认输出。以下是三种可行的实现方案，均可实现formControl存储完整{id: string, name: string}对象、输入框仅显示name属性的需求：

方案1：自定义ControlValueAccessor（推荐，符合Angular表单规范） #

适合多处复用该输入逻辑的场景，完全兼容Angular表单的各项特性（校验、状态管理等）：

• 首先创建自定义输入组件，实现Angular的ControlValueAccessor接口，内部处理对象到显示值的转换

import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

interface UserOption {
  id: string;
  name: string;
}

@Component({
  selector: 'app-user-input',
  template: `<input type="text" [value]="showName" (input)="handleInput($event)">`,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => UserInputComponent),
      multi: true
    }
  ]
})
export class UserInputComponent implements ControlValueAccessor {
  showName = '';
  private innerVal: UserOption | null = null;

  onChange = (val: UserOption | null) => {};
  onTouched = () => {};

  // formControl赋值时触发，将对象转为显示用的name
  writeValue(val: UserOption): void {
    if (val) {
      this.innerVal = val;
      this.showName = val.name;
    }
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  // 输入框内容变更时，同步更新完整对象到formControl
  handleInput(e: Event): void {
    const newName = (e.target as HTMLInputElement).value;
    this.innerVal = { ...this.innerVal, name: newName } as UserOption;
    this.onChange(this.innerVal);
  }
}

• 在父组件中直接使用该组件绑定formControl即可：

<app-user-input [formControl]="targetControl"></app-user-input>

方案2：模板拆分绑定（适合单次使用的简单场景） #

无需创建新组件，直接在现有模板中拆分显示和赋值逻辑：

• 输入框的value单独绑定formControl值的name属性，监听输入事件手动更新完整对象

<input 
  type="text" 
  [value]="targetControl.value?.name" 
  (input)="updateControl($event)"
>

• 组件中添加输入事件处理逻辑：

updateControl(e: Event): void {
  const inputName = (e.target as HTMLInputElement).value;
  this.targetControl.patchValue({
    ...this.targetControl.value,
    name: inputName
  });
}

方案3：使用FormControl transform（Angular 14+ 版本适用） #

Angular 14及以上版本支持直接为FormControl配置转换逻辑，代码最简洁：

• 初始化FormControl时传入transform配置，自动处理视图层和模型层的转换

import { FormControl } from '@angular/forms';

const userValueTransform = {
  // 模型转视图：取对象的name属性显示
  toState: (val: {id: string, name: string} | null) => val?.name || '',
  // 视图转模型：将输入的字符串转为完整对象
  fromState: (viewVal: string, oldVal: {id: string, name: string}) => ({
    ...oldVal,
    name: viewVal
  })
};

// 初始化控件时指定transform
targetControl = new FormControl({id: '123', name: 'Name'}, { transform: userValueTransform });

• 模板中直接正常绑定formControl即可：

<input [formControl]="targetControl">

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