Angular 2响应式表单中自定义控件默认值显示为[object Object]问题

这种情况我碰到过好多次啦，大概率是自定义控件和Angular表单集成时的取值/赋值逻辑出了问题，下面是几个最常见的原因和对应的解决办法：

1. 未正确实现ControlValueAccessor的writeValue方法 #

自定义控件要和Angular响应式表单/模板驱动表单正常交互，必须实现ControlValueAccessor接口，其中writeValue方法的作用是把表单模型的值同步到控件视图里。如果你的writeValue直接把传入的对象赋值给输入框的绑定变量，而没有提取对象里的具体属性，输入框就会把对象转成字符串显示[object Object]。

错误示例：

// custominput.component.ts
writeValue(obj: any): void {
  this.inputValue = obj; // 传入的obj是对象，直接赋值会导致显示异常
}

正确做法：
提取对象中的目标属性赋值，或者处理空值情况：

// custominput.component.ts
writeValue(obj: { value: string }): void {
  this.inputValue = obj?.value || ''; // 只取对象里的value属性
}

2. 父组件表单绑定了对象而非原始值 #

检查你在formangular.component.html里绑定自定义控件的方式，如果使用formControlName或[(ngModel)]绑定的是一个完整对象，而不是字符串、数字这类原始值，输入框自然会把对象转成字符串显示。

错误示例：

<!-- formangular.component.html -->
<custom-input formControlName="userInfo"></custom-input>

如果userInfo对应的表单值是{ username: '张三', age: 25 }这类对象，就会触发问题。

正确做法：
绑定对象里的具体属性，或者在自定义控件内部处理对象的取值逻辑：

<!-- 方式1：绑定对象属性 -->
<custom-input formControlName="username"></custom-input>
<!-- 此时username对应的是原始字符串值 -->

3. 自定义控件的输入框绑定逻辑错误 #

检查custominput.component.html中的输入框绑定，如果直接把一个对象绑定到ngModel或value属性上，也会出现这个问题。

错误示例：

<!-- custominput.component.html -->
<input type="text" [(ngModel)]="inputValue">

如果inputValue是一个对象，输入框就会显示[object Object]。

正确做法：
确保绑定的是对象的具体属性：

<!-- custominput.component.html -->
<input type="text" [(ngModel)]="inputValue.username">

4. 表单初始值设置为对象 #

如果在父组件的formangular.component.ts中，给表单控件设置的初始值是一个对象，而自定义控件没有解析这个对象，也会导致显示异常。

错误示例：

// formangular.component.ts
this.myForm = this.fb.group({
  username: [{ name: '测试用户' }, Validators.required]
});

正确做法：
将初始值设置为原始值：

// formangular.component.ts
this.myForm = this.fb.group({
  username: ['测试用户', Validators.required]
});

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