Angular自定义下拉组件（ControlValueAccessor）预选失效及报错问题

针对你遇到的两个问题，以下是具体原因和修复方案：

问题1：传入selectedOption无法预选对应选项 #

原因 #

• 模板中select绑定的[ngModel]="value"仅定义了setter，无对应getter，视图无法读取正确的当前值
• option上手动设置[selected]与ngModel的自动选中逻辑冲突，导致状态不一致
• 占位符option未设置value，初始值匹配时无法正确区分占位符和有效选项

修复步骤 #

1. 给value添加getter，返回内部存储的field值
2. 移除option上的[selected]属性，由ngModel自动管理选中状态
3. 给占位符option设置[value]="null"，确保无匹配值时显示占位符

问题2：选择下拉选项时抛出报错 #

原因 #

• 组件同时定义了@Output() ngModelChange和ControlValueAccessor的onChange回调，触发时产生冲突报错
• 模板直接绑定(ngModelChange)="onChange($event)"，但onChange在registerOnChange初始化前是空函数，不符合规范用法

修复步骤 #

1. 删除组件中的@Output() ngModelChange输出属性
2. 在组件中新增内部方法处理视图值变更，更新内部状态并触发ControlValueAccessor的回调
3. 模板中(ngModelChange)绑定到新增的内部方法

修改后的完整代码 #

dropdown.component.html

<select class="dropdown" [ngModel]="value" (ngModelChange)="handleChange($event)" (blur)="onTouched()">
    <option disabled [value]="null">{{ placeholder }}</option>
    <option *ngFor="let item of items" [value]="item.value">{{ item.label }}</option>
</select>

dropdown.component.ts

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

interface DropdownOption {
  label: string;
  value: string;
}

@Component({
  selector: 'app-dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => DropdownComponent),
      multi: true,
    },
  ],
})
export class DropdownComponent implements ControlValueAccessor, OnInit, OnChanges {
  @Input() selectedOption?: string;
  @Input() items: DropdownOption[] = [];
  @Input() placeholder = 'Select an option';

  onChange = (value: any) => {};
  onTouched = () => {};

  field = '';

  // 添加value的getter，供视图绑定读取
  get value(): string {
    return this.field;
  }

  // 保留setter，用于更新内部状态并触发回调
  set value(val: string) {
    if (val !== this.field) {
      this.field = val;
      this.onChange(val);
    }
  }

  ngOnInit(): void {
    if (this.selectedOption) {
      this.writeValue(this.selectedOption);
    }
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['selectedOption']?.currentValue) {
      this.writeValue(changes['selectedOption'].currentValue);
    }
  }

  writeValue(value: any): void {
    if (value !== undefined) {
      this.field = value;
    }
  }

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

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

  // 新增内部方法处理视图值变更
  handleChange(value: string): void {
    this.value = value;
    this.onTouched();
  }
}

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