Angular表单选择组件选中后值变为"N: Object"异常问题

在Angular表单选择组件中出现以下异常：

• 选择选项时，表单中得到的是"0: Object"格式的字符串，而非预期的对象
• 当页面存在多个同类型选择器时，选择第二个选择器的选项后，之前已选的对象值会自动变成"N: Object"格式的字符串（N为数字）

组件代码 #

HTML模板代码 #

<div class="row mb-3">
  <label class="col-md-4 col-lg-3 col-form-label">{{title}}</label>
  <div class="col-md-8 col-lg-9">
    <select class="form-select"
            formControlName="{{formControllerName}}"
            (change)="onChangeSelectOption(formControllerName, $event)">
      <option *ngFor="let option of selectionOptions" [ngValue]="option">
        {{ option.name }}
      </option>
    </select>
  </div>
</div>

TypeScript代码 #

// import section...

@Component({...})
export class FormSelectComponent {
  @Input() title: string;
  @Input() form: FormGroup;
  @Input() formControllerName: string;
  @Input() selectedOption: IBuildingType | null;
  @Input() selectionOptions: IBuildingType[];

  onChangeSelectOption(formControlName: string, e: any) {
    this.getFormControl(formControlName)?.setValue(e.target.value, {
      onlySelf: true,
    });
  }

  getFormControl(name: string) {
    return this.form.get(name);
  }
}

场景复现示例 #

选择第一个选择器选项前，表单值：

{    
    ...
    "buildingType1": null,
    "buildingType2": {
        "id": 2,
        "name": "Flat"
    },
    ...
}

选择第一个选择器选项后，表单值：

{    
    ...
    "buildingType1": {
        "id": 3,
        "name": "House"
    },
    "buildingType2": "2: Object",
    ...
}

问题原因及解决方法 #

核心问题 #

手动绑定(change)事件并调用setValue是错误操作：e.target.value对于[ngValue]绑定的对象来说，返回的是字符串化的索引标识（比如"0: Object"）而非实际对象；同时Angular表单的formControlName已经能自动同步选中值，手动调用setValue会覆盖原有正确的对象值，导致其他控件的值被异常序列化。

修复步骤 #

1. 移除手动的(change)事件及对应方法
   Angular的formControlName结合[ngValue]已能自动完成表单值同步，无需额外手动处理change事件。修改后的HTML模板：

   <div class="row mb-3">
     <label class="col-md-4 col-lg-3 col-form-label">{{title}}</label>
     <div class="col-md-8 col-lg-9">
       <select class="form-select" formControlName="{{formControllerName}}">
         <option *ngFor="let option of selectionOptions" [ngValue]="option">
           {{ option.name }}
         </option>
       </select>
     </div>
   </div>
   

2. 简化子组件TS代码
   移除冗余的onChangeSelectOption方法，简化后的代码：

   // import section...
   
   @Component({...})
   export class FormSelectComponent {
     @Input() title: string;
     @Input() form: FormGroup;
     @Input() formControllerName: string;
     @Input() selectedOption: IBuildingType | null;
     @Input() selectionOptions: IBuildingType[];
   
     getFormControl(name: string) {
       return this.form.get(name);
     }
   }
   

3. 正确设置默认选中值
   若需要默认选中项，直接在父组件中给对应FormControl赋值即可：

   // 假设form是已初始化的FormGroup
   this.form.patchValue({
     buildingType2: this.selectionOptions.find(opt => opt.id === 2)
   });
   

验证效果 #

修复后，选择选项时表单值会直接绑定为对应的IBuildingType对象，多个选择器之间不会互相干扰，"N: Object"的异常格式会消失。

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