Question

在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>

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

将数据（例如值，标签）引入my-radio组件是可行的，但无法通过ngModel双向数据绑定将选择返回到我的父组件中。

即使最初更改radioBoundProperty的值，它的值也会覆盖两个我的电台的value属性

现在更新此堆栈闪电是一个可行的示例

stackblitz和现在可以使用的示例code

Answer 1

使用registerOnChange函数将值发送给父级。

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');
    }
}

如何为自定义输入建立ngModel双向数据绑定，例如在单选按钮上

1 个答案: