使用 ngModel 的动态单选按钮 2 方式绑定 - Angular 6

Question

我正在生成动态单选按钮，这些按钮将在表单提交时合并，而不是单独提交。但是，我需要将它们单独绑定到我的组件中的特定值，我不知道该怎么做。

我在 stackoverflow 上看到了关于这个主题的其他相关帖子，但似乎没有一个可以帮助我。

这是我的代码：

<input type="radio" class="one" id="{{ i }}_{{ candidate.user._id }}_{{post.id}}_{{ candidate.date}}" name="{{post.id}}" [value]='candidate.user._id' [(ngModel)]="post.id">
<label for="{{ i }}_{{ candidate.user._id }}_{{post.id}}_{{ candidate.date }}">
    <span>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
    </span>
</label>

任何帮助将不胜感激。

Answer 1

在组件中取一个数组的新变量：

private radioButtonValues : Array<any> = [];

然后将其绑定到您的 ngModel 中，索引为 i 为：

<input type="radio" class="one" 
       id="{{ i }}_{{ candidate.user._id }}_{{post.id}}_{{ candidate.date}}" 
       name="{{post.id}}" 
      [value]='candidate.user._id' 
      [(ngModel)]="radioButtonValues[i]">

如果您想要一些操作，您还可以使用ngModelChange 事件来获得更多功能。

<input type="radio" class="one" 
       id="{{ i }}_{{ candidate.user._id }}_{{post.id}}_{{ candidate.date}}" 
       name="{{post.id}}" 
       [value]='candidate.user._id' 
       [(ngModel)]="radioButtonValues[i]" 
       (ngModelChange)='changeEventInRadioButton($event)'>

然后在你的组件类中声明函数

changeEventInRadioButton($event) {
    console.log($event);
}

最后在表单提交检查

onSubmit(){
    console.log(this.radioButtonValues);
}