自定义BsSelect组件ValueAccessor更新模型异常问题排查

我为Angular开发了一个实现Bootstrap样式的自定义select组件（BsSelect），希望在该组件上使用FormsModule的ngModel指令。参照Angular官方实现编写自定义ValueAccessor后出现异常：选择组件选项时，模型中存入的是字符串而非[ngValue]指定的对象。

组件使用示例 #

<!-- 在自定义组件上应用ngModel -->
<bs-select [(ngModel)]="selectedDish" [disabled]="disableSelectBox">
  <option [ngValue]="null" selected>选择一道菜品</option>
  <option *ngFor="let dish of dishes" [ngValue]="dish">{{ dish.name }}</option>
</bs-select>

disableSelectBox = false;
selectedDish: Dish | null = null;
dishes: Dish[] = [
  { id: 1, name: '三文鱼', description: '配小番茄的三文鱼', ingredients: ['三文鱼', '番茄', '胡椒酱'] },
  { id: 2, name: '意大利面', description: Bolognaise风味意面, ingredients: ['意面', '碎肉', '番茄酱', '蘑菇'] },
  { id: 3, name: '千层面', description: Bolognaise风味千层面, ingredients: ['意面', '碎肉', '番茄酱', '奶酪'] }
];

BsSelectValueAccessor核心代码片段 #

@Directive({
  selector: 'bs-select',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => BsSelectValueAccessor),
      multi: true,
    },
  ],
})
export class BsSelectValueAccessor implements ControlValueAccessor {
  // 省略其他代码...

  @HostListener('change', ['$event']) hostOnChange(ev: InputEvent) {
    this.onChange((<any>ev.target).value);
  }

  getOptionValue(valueString: string) {
    const id = this.extractId(valueString);
    return this.optionMap.has(id) ? this.optionMap.get(id) : valueString;
  }

  extractId(valueString: string) {
    return valueString.split(':')[0];
  }
}

BsSelectOption核心代码片段 #

@Directive({ selector: 'option' })
export class BsSelectOption implements OnDestroy {
  // 省略其他代码...

  setElementValue(value: string) {
    const nativeSelect = this.selectAccessor['selectBox'].selectBox;
    if (nativeSelect) {
      this.renderer.setProperty(nativeSelect.nativeElement, 'value', value);
    }
  }
}

1. 事件监听目标错误：hostOnChange监听的是自定义组件<bs-select>的change事件，而非内部原生<select>的change事件。用户选择选项时，原生<select>触发的事件未被ValueAccessor捕获，导致onChange接收的是无效值。
2. 选项值设置逻辑错误：BsSelectOption的setElementValue方法直接修改整个原生<select>的value属性，干扰了ValueAccessor的状态同步逻辑，应该仅修改当前<option>元素的value。

1. 修正事件监听目标 #

移除原有的@HostListener，改为在构造函数中直接监听原生<select>的change事件：

constructor(private renderer: Renderer2, private elementRef: ElementRef, private selectBox: BsSelectComponent) {
  // 假设BsSelectComponent的selectBox属性是原生select的ElementRef
  if (selectBox.selectBox) {
    this.renderer.listen(selectBox.selectBox.nativeElement, 'change', (ev) => {
      this.onChange((<HTMLSelectElement>ev.target).value);
    });
  }
}

2. 修正选项值设置逻辑 #

修改BsSelectOption的setElementValue方法，改为设置当前<option>元素的value属性：

setElementValue(value: string) {
  this.renderer.setProperty(this.element.nativeElement, 'value', value);
}

3. 验证转换逻辑 #

确认extractId方法能正确从valueString中提取ID（例如从"0: Object"中提取"0"），确保getOptionValue能通过ID从optionMap中获取对应的对象。

修复后，用户选择选项时，原生<select>的change事件会被正确捕获，ValueAccessor会根据选项的value字符串提取ID，从optionMap中获取对应的Dish对象并同步到selectedDish变量中，模型中存入的将是[ngValue]指定的对象而非字符串。

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