Angular FormControl绑定JSON对象显示[object,object] 如何仅展示对象name值

出错本质 #

原生HTML输入框的value属性只支持字符串、数字这类原始类型值。你现在直接把包含name、code的整个JSON对象赋值给对应的FormControl，输入框渲染时会自动把传入的复杂对象转成字符串表示，最终就输出[object Object]，根本无法读取到对象内部的属性。

匹配需求的实现方式 #

如果只是要在输入框展示对象的name属性值（也就是India），最简洁的修复是赋值时只传递需要展示的属性值，不要把整个对象塞给FormControl：

let fSource = {
 name: 'India',
 code: 'IN'
};
// 仅提取name字段赋值给对应控件，控件值为纯字符串
this.myForm.get('defaultLocation')?.setValue(fSource.name);

这种写法下，FormControl存储的值就是字符串'India'，输入框会直接正常渲染内容，不会出现类型转换问题。

特殊场景说明 #

如果你的业务要求FormControl必须同时存储完整对象（比如提交表单时需要同时拿到name和code两个值），就不要让原生输入框直接绑定FormControl的原始值：

• 模板层单独取对象内的name属性，作为输入框的实际显示内容
• 监听输入框的输入事件，回写更新FormControl里存储的对象结构
  如果依然直接绑定整个FormControl值，还是会触发对象转字符串的问题。

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