NG_VALUE_ACCESSOR单选按钮组件无法向父组件返回值求助

问题原因 #

你的自定义组件实现ControlValueAccessor时，没有在值变化时正确通知父组件的FormControl：

• 模板中错误地在ngModelChange事件中调用registerOnChange（该方法用于注册回调函数，而非直接触发值变更通知）
• 未在值更新时调用已注册的onChanged回调，导致父组件FormControl无法感知子组件的值变化
• 缺少调用onTouched方法标记控件为已触碰状态

修复后的代码 #

子组件模板 (child.html) #

修改ngModelChange绑定目标，调用自定义的变更处理方法：

<div class="planned-radio-buttons">
    <mat-radio-group [(ngModel)]="value" (ngModelChange)="radioButtonChange($event)">
        <mat-radio-button [value]="true" class="planned-radio-button">
            {{'vehicle.customer-approval' | rdsTranslate}}
        </mat-radio-button>
        <mat-radio-button [value]="false" class="planned-radio-button">
            {{'vehicle.customer-refusal' | rdsTranslate}}
        </mat-radio-button>
    </mat-radio-group>      
</div>

子组件逻辑 (child.ts) #

完善值变更通知逻辑，同时修正NG_VALUE_ACCESSOR的useExisting为forwardRef（符合Angular依赖注入规范）：

import { Component, Input, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { PlannedMaintenance } from 'model/planned-maintenance.model';

@Component({
    selector: 'rds-service-advisor-planned-maintenance',
    templateUrl: './planned-maintenance.component.html',
    styleUrls: ['./planned-maintenance.component.scss'],
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            multi: true,
            useExisting: forwardRef(() => PlannedMaintenanceComponent),
        },
    ],
})
export class PlannedMaintenanceComponent implements ControlValueAccessor {
    @Input() readonly operations: Array<PlannedMaintenance>;
    value: boolean = false; // 初始化默认值
    onChanged: (value: boolean) => void = () => {};
    onTouched: () => void = () => {};

    radioButtonChange(val: boolean): void {
        this.value = val;
        this.onChanged(this.value); // 通知父组件值变更
        this.onTouched(); // 标记控件已触碰
    }

    writeValue(value: boolean): void {
        this.value = value ?? false; // 处理null/undefined情况
    }

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

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

    // 可选：支持disabled状态
    setDisabledState(isDisabled: boolean): void {
        // 这里可以添加禁用状态的UI处理，比如给radio group添加disabled属性
    }
}

父组件代码（无需修改） #

父组件的表单定义和模板保持原样即可，修复后点击按钮就能正确打印更新后的表单值。

更优实现方案：避免混用ngModel #

在自定义表单组件中，建议直接绑定属性和事件，避免使用ngModel，减少逻辑混淆：

优化后的子组件模板 #

<div class="planned-radio-buttons">
    <mat-radio-group [value]="value" (change)="onRadioGroupChange($event)">
        <mat-radio-button [value]="true" class="planned-radio-button">
            {{'vehicle.customer-approval' | rdsTranslate}}
        </mat-radio-button>
        <mat-radio-button [value]="false" class="planned-radio-button">
            {{'vehicle.customer-refusal' | rdsTranslate}}
        </mat-radio-button>
    </mat-radio-group>      
</div>

优化后的子组件逻辑 #

import { Component, Input, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { PlannedMaintenance } from 'model/planned-maintenance.model';
import { MatRadioChange } from '@angular/material/radio';

@Component({
    selector: 'rds-service-advisor-planned-maintenance',
    templateUrl: './planned-maintenance.component.html',
    styleUrls: ['./planned-maintenance.component.scss'],
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            multi: true,
            useExisting: forwardRef(() => PlannedMaintenanceComponent),
        },
    ],
})
export class PlannedMaintenanceComponent implements ControlValueAccessor {
    @Input() readonly operations: Array<PlannedMaintenance>;
    value: boolean = false;
    onChanged: (value: boolean) => void = () => {};
    onTouched: () => void = () => {};
    isDisabled: boolean = false;

    onRadioGroupChange(event: MatRadioChange): void {
        if (!this.isDisabled) {
            this.value = event.value;
            this.onChanged(this.value);
            this.onTouched();
        }
    }

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

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

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

    setDisabledState(isDisabled: boolean): void {
        this.isDisabled = isDisabled;
    }
}

这个方案直接使用mat-radio-group的原生change事件，无需依赖ngModel，逻辑更清晰，也符合Angular表单组件的最佳实践。

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