Angular 如何创建自定义的被动表单元素？

我正在Angular中使用反应式表单，我正在尝试创建一个自定义表单元素，以便可以在表单中使用按钮。我试图遵循的教程，但不清楚如何将其集成到我的组件。目前，我得到以下错误

ERROR Error: No value accessor for form control with name: 'coverage_for_domestic_partners'

以下是我的代码，如有任何帮助，将不胜感激

//HTML

<div class="button-group" [formGroup]="group">
    <button
        *ngFor="let option of config.options"
        class="button button--toggle"
        [ngClass]='{"is-active": option.selected}'
        (click)="select($event, option)"
        [formControlName]="config.key">
        <div class="button-content">{{option.key}}</div>
    </button>
</div>

您需要实现接口，为此，您需要实现以下方法：

interface ControlValueAccessor {
  writeValue(obj: any): void
  registerOnChange(fn: any): void
  registerOnTouched(fn: any): void
  setDisabledState(isDisabled: boolean)?: void
}

您可以正确地看到我的示例实现

当组件的值更改时，必须调用在ts文件中注册的

OnChange

方法

你可以看到我的呼叫示例

之后，您可以通过表单中的标记选择器（在您的例子中是

z-toggle-group

）使用组件，并且您将能够使用

formControlName

<div class="button-group" [formGroup]="group">
    <button
        *ngFor="let option of config.options"
        class="button button--toggle"
        [ngClass]='{"is-active": option.selected}'
        (click)="select($event, option)">

        <z-toggle-group [formControlName]="config.key"></z-toggle-group>

        <div class="button-content">{{option.key}}</div>
    </button>
</div>

{{option.key}

---

您的代码是否正常工作。

写入值（obj:any）在哪里：void

registerChange（fn:any）：void

实现？很抱歉，我最初忘记了复制和粘贴它。我不知道如何将它们集成到我的函数中？谢谢你的回答，但这有点让人困惑。我想把它加进去？谢谢你，托玛兹！你的回答很彻底。这是一块埋藏的宝石。非常感谢@ThomazCapra

<div class="button-group" [formGroup]="group">
    <button
        *ngFor="let option of config.options"
        class="button button--toggle"
        [ngClass]='{"is-active": option.selected}'
        (click)="select($event, option)">

        <z-toggle-group [formControlName]="config.key"></z-toggle-group>

        <div class="button-content">{{option.key}}</div>
    </button>
</div>