使用mat-slide-toggle时出现No value accessor错误的技术问询

错误原因 #

当子组件嵌套在formGroup内部时，Angular会默认尝试将该组件注册为表单控件的一部分，但你的ChildAComponent并未实现Angular表单要求的ControlValueAccessor接口——这是自定义组件与表单系统交互的标准接口，因此抛出"没有值访问器"的错误。而原生input checkbox本身内置了Angular的表单值访问器，所以替换后不会触发错误。

解决方案 #

方案1：快速规避（适合简单场景）

在父组件的子组件标签上添加ngNoForm属性，告知Angular不要将该组件视为表单控件的一部分：

<form [formGroup]="myFormGroup">
    <app-child-a [subscribedControl]="$any(myFormGroup.controls.myOption)" ngNoForm></app-child-a>
</form>

方案2：实现ControlValueAccessor（推荐，适合复用组件）

让子组件实现ControlValueAccessor接口，使其成为标准的表单兼容组件，这样可以直接用formControlName绑定，更符合Angular表单规范：

子组件代码修改：

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

@Component({
    selector: 'app-child-a',
    template: `
        <mat-slide-toggle 
            [(ngModel)]="currentValue" 
            (change)="onValueChange($event.checked)"
            (blur)="onTouched()"
        ></mat-slide-toggle>
    `,
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => ChildAComponent),
            multi: true
        }
    ]
})
export class ChildAComponent implements ControlValueAccessor {
    currentValue = false;
    private onChangeCallback: (value: boolean) => void = () => {};
    private onTouchedCallback: () => void = () => {};

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

    registerOnChange(fn: (value: boolean) => void): void {
        this.onChangeCallback = fn;
    }

    registerOnTouched(fn: () => void): void {
        this.onTouchedCallback = fn;
    }

    setDisabledState?(isDisabled: boolean): void {
        // 可选：根据需要处理组件禁用状态，比如绑定到mat-slide-toggle的disabled属性
    }

    private onValueChange(value: boolean): void {
        this.onChangeCallback(value);
    }

    private onTouched(): void {
        this.onTouchedCallback();
    }
}

父组件模板简化为：

<form [formGroup]="myFormGroup">
    <app-child-a formControlName="myOption"></app-child-a>
</form>

补充说明 #

直接在父组件中使用mat-slide-toggle [formControl]="myFormGroup.controls.myOption"不会报错，因为MatSlideToggle组件本身已经实现了ControlValueAccessor接口，符合Angular表单的交互要求。

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