问题描述： 当我们创建一个带有控件值访问器(CVA)的自定义表单控件时，我们可能会遇到一个问题：控件值访问器无法获取或设置表单上的绑定值。这意味着可能需要手动更新绑定值，这违反了我们使用CVA的初衷。

解决方案： 要解决此问题，我们可以在CVA中使用ɵbypassSanitizationTrustValue()函数。此函数将绕过Angular的安全检查器，并将值添加到控件上。这使得CVA可以捕获表单上的绑定值并自动更新它。

下面是一个示例控件值访问器：

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

@Component({ selector: 'app-custom-input', template: , providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CustomInputComponent), multi: true } ] }) export class CustomInputComponent implements ControlValueAccessor { value: string;

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

writeValue(value: string): void { this.value = value; }

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

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

setDisabledState?(isDisabled: boolean): void { throw new Error('Method not implemented.'); } }

在控件的writeValue()方法中，我们可以使用ɵbypassSanitizationTrustValue()函数绕过Angular的安全检查器并将值添加到控件上：

writeValue(value: string): void { this.value = value; this.onChange(this.value); const element = document.getElementById('custom-input'); element.value = value; const event = new Event('input', { bubbles: true }); element.dispatchEvent(event); element.dispatchEvent(new Event('change')); element['value'] = element['value'] || ''; element['value'] !== value && (element['value'] = value); element['control'] && (element['control'].setValue(value, {})); const formControlName = element.getAttribute('formControlName') || (element['parentNode'] && element['