Javascript 如何为自定义输入（例如单选按钮）建立ngModel双向数据绑定

我在Angular中实现自己的单选按钮元素时遇到问题

下面的代码是我想让父组件工作的标记：

<form>
  <my-radio [(ngModel)]="radioBoundProperty" value="1" name="myCustomRadioButton">Btn 1</my-radio><br>
  <my-radio [(ngModel)]="radioBoundProperty" value="2" name="myCustomRadioButton">Btn 1</my-radio><br>
</form>

<p>
  The value of radioBoundProperty is:
</p>
<pre>{{radioBoundProperty|json}}</pre>

Btn 1

Btn 1


radioBoundProperty的值为：

{{radioBoundProperty}json}

到目前为止，我已经构建了一个自定义的无线电组件，实现了

ControlValueAccessor

将数据（例如值、标签）带入<代码>我的收音机组件正在工作，但无法通过ngModel双向数据绑定将所选内容带回父组件

即使我最初更改

radioBoundProperty

的值，它的值也会覆盖我的两个收音机属性的

value

属性

立即更新此stackblitz就是一个有效的示例

---

现在的示例使用

registerChange

函数将值发送给父对象

---

我正在使用my radio组件中的

ControlValueAccessor

，该组件实现了valueChanged并映射到s change事件，它现在正在编写一次。但一旦我检查了无线电，那么两个无线电都成为当前的ngModel值（更新了stackblitz）@Bernhard将ngModel添加到无线电输入中

export class RadioModel implements ControlValueAccessor { 
    onChange = (val: string) => { };
    onTouched = () => { };
    onApplied = () => { };

    writeValue(val: string): void {
        // when the ngModel change it comes under writeValue function
    }

    registerOnChange(fn: (val: string) => void): void {
        this.onChange = fn;
    }

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

    valueChanged(){
         this.onChange('your value');
    }
}