NG_VALUE_ACCESSOR 不向单选按钮的父组件返回值

Question

在父组件中，我创建了一个适用于 3 对单选按钮的表单。我想使用 NG_VALUE_ACCESSOR 来完成此操作，从父级到子级的通信对我来说很有效，但是当我想在按钮上打印父级中子组件的值时，它们不会更改并且始终为 false。下面我附上父组件和子组件的代码。但如果有更好的方法，我愿意接受其他可能性。感谢您的帮助

parent.html

form [formGroup]="plannedMaintenanceForm">
        <rds-service-advisor-planned-maintenance
            [operations]="presentOperations"
            formControlName="presentOperation"
            ></rds-service-advisor-planned-maintenance>
        <rds-service-advisor-planned-maintenance
            [operations]="uncompletedOrDelayedOperations"
            formControlName="uncompletedOperation"
            ></rds-service-advisor-planned-maintenance>
        <rds-service-advisor-planned-maintenance
            [operations]="upcomingOperations"
            formControlName="upcomingOperation"
            ></rds-service-advisor-planned-maintenance>
        <button class="ButtonSquareRefClient ButtonSquareRefClient_primary approve-button" (click)="test()">
            <span>{{ 'common.save' | rdsTranslate }}</span>
        </button>
    </form>

parent.ts

plannedMaintenanceForm = new FormGroup({
        presentOperation: new FormControl(false),
        upcomingOperation: new FormControl(false),
        uncompletedOperation: new FormControl(false)
    });

test(): void {
        console.log(this.plannedMaintenanceForm.value)
    }

child.ts

import { Component, Input, OnInit, forwardRef } from '@angular/core';
import { ControlValueAccessor, FormGroup, 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: PlannedMaintenanceComponent,
        },
    ],
})
export class PlannedMaintenanceComponent implements ControlValueAccessor {
    @Input() readonly operations: Array<PlannedMaintenance>;
    value: boolean;
    onChanged: any = () => {
        // empty
    };
    onTouched: any = () => {
        // empty
    };

    constructor() {}

    writeValue(value) {
        this.value = value;
        console.log(value)
    }

    registerOnChange(fn: any): void {
        this.onChanged = fn;
        console.log(this.value)
    }

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

    radioButtonChange(val: boolean): void {
      this.value = val;
    }
}

child.html

<div class="planned-radio-buttons">
        <mat-radio-group [(ngModel)]="value" (ngModelChange)="registerOnChange($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>

Answer 1

所以问题是直接使用registerOnChange，解决方案是使用onChanged函数。