Angular：不预选下拉值（ControlValueAccessor）
在Angular应用程序中，如果您创建了一个带有下拉列表的表单，并且您希望该下拉列表不选择初始值，则可能需要实现ControlValueAccessor接口。该接口允许您控制表单控件的值的呈现和内容。
下面是如何实现ControlValueAccessor接口来解决此问题的示例代码：
首先，您需要导入ControlValueAccessor接口。然后，您需要创建一个自定义指令来实现该接口，如下所示：
import { Directive, ElementRef, HostListener, Input, Renderer2 } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@Directive({ selector: '[appNoSelectValue]', providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: NoSelectValueDirective, multi: true } ] }) export class NoSelectValueDirective implements ControlValueAccessor { @Input() noSelectValue: any;
constructor(private renderer: Renderer2, private hostElement: ElementRef) {}
onChange: any = () => {}; onTouched: any = () => {};
writeValue(obj: any): void { const options = this.hostElement.nativeElement.options; for (let i = 0; i < options.length; i++) { if (options[i].value == obj) { options[i].selected = true; this.renderer.setProperty(options[i], 'selected', true); break; } } }
registerOnChange(fn: any): void { this.onChange = fn; }
registerOnTouched(fn: any): void { this.onTouched = fn; }
setDisabledState(isDisabled: boolean): void { this.renderer.setProperty(this.hostElement.nativeElement, 'disabled', isDisabled); }
@HostListener('change', ['$event.target.value']) onSelectChange(value: any) { this.onChange(value); } }
然后，您需要在需要下拉列表的组件中使用此自定义指令：